Accessible Web Design Overview - PowerPoint Presentation

Slide1

Accessible Web Design Overview

Rick Ells

UW-IT Web Guy

rells@uw.eduSlide2

AccessibleWeb@U

An interest group that advocates for inclusive Web design

A working group of the UW Web Council

You do not work for us

You can add yourself to the email list

https://mailman2.u.washington.edu/mailman/listinfo/accessibleweb

Blog is at

http://accesswebu.blogspot.com/Slide3

The Goals of Accessible Web Design

Be usable and intelligible to as many people as possible, including…

People not able to use a mouse

People not navigating by touch

Be interpretable by assistive technologies

Structured

Semantic

StandardSlide4

Quick Evaluation

Tools

Firefox Web Developer browser extension

http://chrispederick.com/work/web-developer/help/

Firefox WCAG Contrast Checker

https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/Slide5

QE: headers and layout

Are header elements being used semantically and are they organized hierarchically

P

seudo

headers

created

with bolding and

sizing will not be recognized as headers

Are tables being used for page layout

?

Tables layout makes navigation much more complex

Can content be interpreted intelligibly without layout?Slide6

QE: alternative text

<

img

src

=“gw.jpg” alt=“George Washington”>

Text should be:

Be accurate and equivalent

Be succinct

Not be redundant

Not use phrases like “image of…”

Example from http://webaim.org/techniques/alttext/Slide7

QE: Labelling

<form action="form_action.asp" method="get">

<label for="

first"

>First name:</label>

<input type="text" name="

fname

" id="

first

"/><

br

/>

<label for="

last">Last name:</label> <input type="text" name="lname" id="last" /><br /> <input type="submit" value="Submit" /></form> Slide8

QE: colorsSlide9

QE: semantic markup

Semantic:

New Technology

<h2 style="font: medium bold

verdana

, sans-serif"> New Technology</h2>

Non-Semantic:

New Technology

<

div

style="font: medium bold

verdana

, sans-serif"> New Technology</

div

> Slide10

QE: problem areas

Tables

layout

Essential information in graphics without alt text

Content buried in scripts

Not using progressive enhancement methods

Content added after page load (Ajax)

ARIA roles needed to signal assistive technology which areas might receive updatesSlide11

Accessibility at the UW

DO-IT

http://uw.edu/doit

Information

Technology Accessibility

http

://uw.edu/accessibility/

Access Technology Center

http://uw.edu/itconnect/accessibility/atl

WebInSight

http://webinsight.cs.washington.edu/AccessComputing http

://www.washington.edu/accesscomputing/Slide12

Accessibility Research at the UW

AIM

Research Group

http://depts.washington.edu/aimgroup

/

Project Access

http://cognitivetech.washington.edu

/

Enable

http://

enable.cs.washington.edu/index.php/Main_Page

Center for Technology

and Disability Studieshttp://uwctds.washington.edu/Design, Use, Build (DUB)

http://dub.washington.edu/Slide13

Web Accessibility Guidelines

W3C Web

Content

Accessibility Guidelines (WCAG) 2.0

http://www.w3.org/TR/WCAG20

/

Section 508

http://www.section508.gov

/

Section

508 Tutorial

http://

www.access-board.gov/sec508/software-tutorial.htmSlide14

Motivations

Personal

Community

Added value to our institution

Legal guidelines and requirements

Public relations

The baby-boomers are coming (and they have money)Slide15

The Legal

Situation

Are UW Web sites a “public

accomodation

” under the Americans with Disabilities Act?

Do Washington

state guidelines apply?

http

://

ofm.wa.gov/ocio/policies/documents/1000g.pdf

Do you have a contractual agreement with students?

Do you have obligations to your funding sources?Slide16

Walk the Path

Welcome to the Basics 201 class!

Login with your UW NetID

View a course page

Download a PDF article

Submit a question

Use an online Web tool

Watch a videoSlide17

Where Are the Obstacles?

UW NetID

Basics 201

Course Web Site

Ideas.pdf

Download PDF

Ask a

Professor

Online

Form

Ask a Question

Basics

Online Forum

Use Online Tool

Great Basics

of World History

Watch a VideoSlide18

Goals/Principles/Patterns

Goals

– Why are we doing this?

Principles

– How are we going to reach the goals?

Patterns

- What we are going to do to solve specific problems that come up as we implement the principles?

From Luke

Wrobelski

“Design Principles”, (

http://www.lukew.com/ff/entry.asp?1292

), which he derived from Service Oriented Architecture literatureSlide19

Goals

Inclusive

Effective

Efficient

SupportiveSlide20

Principles

We will design our Web services so they are…

Perceivable

Operable

Understandable

RobustSlide21

Patterns

Adhere to standards

Use semantic elements

WCAG 2.0

Accessible Rich Internet Applications (ARIA)

ECMA Standard Scripting

Progressive enhancement methods in scriptingSlide22

Content Management Systems

Most CMSs come out-of-the-box with good accessibility; don’t ruin it

Drupal

Accessibility Group

http://

groups.drupal.org/accessibility

Plone

Accessibility

http://

plone.org/accessibility-infoWordPress Accessibility http://codex.wordpress.org/Accessibility

Joomla Accessibility http://www.joomla.org/accessibility-statement.htmlSlide23

Vendors Invest in Accessibility

Apple Accessibility

http://www.apple.com/accessibility

/

VoiceOver

http://www.apple.com/accessibility/voiceover

/

Microsoft Accessibility

http://www.microsoft.com/enable

/Adobe Accessibility http://www.adobe.com/accessibility/Slide24

HTML5

Capable of excellent accessibility

Structured

Semantic

Roles

Validatable

HTML5 Accessibility

http://html5accessibility.com

/Slide25

Trends Going Forward

Rapid change

Mobile devices –

smartphones

to tablets – do it now, here, get immediate results

Web sites and apps need to work with wide range of sizes –

smartphone

, tablet, laptop, desktop

Pressure for simplification –

K

eep

I

t Seriously SuccinctSlide26

Mobile First

Start with designing for the mobile device, then supplement the design for laptops and desktops

Priority of mobile is rising

Mobile forces you to focus

Mobile offers new capabilities (knows location, direction)

Mobile First – Luke

Wroblewski

http://

www.lukew.com/ff/entry.asp?933

Slide27

Responsive Web Design

Web pages that themselves adapt to the capabilities of the device viewing them

Responsive Web Design – Ethan

Marcotte

http://www.alistapart.com/articles/responsive-web-design

/

Examples

Sample

Page – Robot or Not?

http://responsivewebdesign.com/robot

/Responsive & Responsible – Scott Jehl http://filamentgroup.com/examples/bdconf-2011/sjehl-bdconf-2011.pdfSlide28

Resources

Blogs

WebAxe

–

http://webaxe.blogspot.com

Presentations

Top Mistakes in Web Accessibility –

Wojtek

Zajac

http://www.slideshare.net/wojciechzajac/top-mistakes-in-web-accessibility

Facebook

Mike Paciello - http://www.facebook.com/mike.pacielloReportsDigital Inclusion of People With Disabilities

http://www.disabled-world.com/editorials/technology/digital-inclusion.phpSlide29

Resources

Sites

UW Information Technology Accessibility

http://uw.edu/accessibility

Web Accessibility in Mind (

WebAIM

)

http://webaim.org/

Accessible Technology Coalition

http://atcoalition.org/

W3C Web Accessibility InitiativeWeb Accessibility Presentations and Tutorials http://www.w3.org/WAI/train.htmlWAI Guidelines and Techniques

http://www.w3.org/WAI/guid-tech.html