introduction to web accessibility (and usability)

Robert L. ToddUSG, Director, Policy and Partnership

[email protected]

Senior Research ScientistGeorgia Institute of Technology

Introduction to Web Accessibility (and Usability)

Introduction to Web Accessibility and UsabilityRobert L. Todd

What is Accessible Web Design?• Design for the web that attempts to

make information available to all users. • Design for Disability, but also for

Usability - the design of interfaces that are effective, efficient and satisfying


What is Accessible Web Design?Web Accessibility – Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. (W3C.org, 2013)


What is Accessible Web Design?• Basically - it means that people with

disabilities can use the Web. • Specifically - it includes all types of

disabilities, e.g., visual, auditory, physical, speech, cognitive, and neurological.


What is Accessible Web Design?


What is Accessible Web Design?Example: Not very accessible …


http://www.wunderground.com/

What is usability?• Usability - the design of interfaces that

are effective, efficient and satisfying

• Exhibit – Usable?


http://www.valleyisleaquatics.com/

What is usability?Usability is a quality attribute relating to

how easy something is to use. It refers to how quickly people can learn to use something, how efficient they are while using it, how memorable it is, how error-prone it is, and how much users like using it. (Nielsen & Loranger, 2006)


What is usability?Good resource: Usability.gov

http://www.usability.gov/basics/ucd/index.html


Relationship: Accessibility and Usability

When designing online resources, it is rarely useful to distinguish between accessibility and usability - they are an organic whole.



Electronic Curb Cuts - For the most part, the same design features that make a site accessible make it usable, and vice versa



• Example: If a site uses images for navigation and there is no alt text, then … it is not accessible.

• But … if it includes poorly written, verbose alt text, it is accessible, but not usable.



Alt Text Examples:



Alt Text Examples:


http://msdn.microsoft.com/en-us/library/ms971334.aspx

Accessible – Also Usable


Accessibility and UsabilityTo sum up: Accessibility is nothing more than the logical

extension of usability to include all people.– Usability and accessibility should go hand-in-hand– For the most part, this is true: increased

accessibility leads to greater usability


Who are the People with Disabilities?


Disabilities“Disability” is an imprecise word:

–Disability (and ability) is different over time and between people

–People can have combinations of disabilities

–Better to use functional descriptions• TBI example• Cerebral Palsy example


DisabilitiesSpecific disabilities and case studies

–Visual disabilities–Hearing disabilities–Physical disabilities–Speech disabilities–Behavioral disabilities


DisabilitiesSpecific disabilities and case studies

–Cognitive and neurological disabilities–Multiple disabilities–Aging related conditions


DisabilitiesExcellent online source with case studies at W3C/WAI:http://www.w3.org/WAI/intro/people-use-web/Overview.html


http://www.w3.org/WAI/intro/people-use-web/Overview.html

http://www.w3.org/WAI/intro/people-use-web/Overview.html

DisabilitiesDifferent disabilities may be addressed by

similar accommodations–Blind person–Person with no use of hands

• Both assisted by keyboard controls in place of mouse, in conjunction with other assistive technology (AT)


DisabilitiesAccessibility solutions contribute to

Universal Design and Usability

–Example - Voice recognition benefits:• Person with no use of hands• Busy worker with poor typing skills


In general, magnification and high levels of illumination will assist in reading and other near vision tasks.

Macular Degeneration

Photos courtesy of National Eye Institute http://www.nei.nih.gov/photo/sims/sims.htm


http://64.4.8.250/cgi-bin/linkrd?_lang=EN&lah=bc780ea538db446b7d07ec6da3c31177&lat=1030036357&hm___action=http://www.nei.nih.gov/photo/sims/sims.htm

Age related cataracts are often yellow or brown causing loss of sensitivity to blue.

Cataracts




This is the largest single cause of visual impairment among those of working age.

Diabetic Retinopathy




Tunnel Vision/Retinitis Pigmentosa

This impairment often makes it possible to read small print but not large print.




20/200 Legally Blind View of Computer Screen


Aging/Cataract View of Computer Screen


Audience Factors19.4% of Americans (54 million) have a

disability800 million+ world-wide10% to 15% of the browsing population


Audience Factors: NumbersDisability as a function of age


Audience Factors: Numbers

Prevalence of disabilities in U.S.


Audience Factors: NumbersAging and disability


Audience Factors: NumbersGraying of the U.S.


Accessibility Guidelines and Standards


Web Accessibility GuidelinesWhich guidelines to use?

– Section 508 similar to WCAG 2.0, level A and part of level AA

– WCAG 2.0 Conformance levels AA and AAA most restrictive

– WCAG 2.0 Conformance Level AAA - most accessible, but some trade-off in design limitations


Laws vs. Guidelines508 or WCAG 1.0? A general comparison.

Paragraphs (l), (m), (n), (o), and (p) of Section 508 article 1194.22 are different from WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1 checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to comply with this section.


Web Accessibility GuidelinesWhich guidelines to use?

– Section 508 - created by the Access Board, legislated

– WCAG - created by the WAI/W3C, voluntary, 2.0 current, 1.0 still used


http://webaim.org/standards/508/checklist

http://www.w3.org/WAI/intro/wcag.php

Laws vs. Guidelines508 or WCAG 2.0?

WCAG 2.0 techniques can be used to meet unambiguously every one of the Section 508 guidelines.

Conversely, a Section 508-compliant page using these techniques will also conform to WCAG 2.0 Level A and part of Level AA (with the exception of three criteria)


Laws vs. Guidelines508 or W3C? A general comparison.

– 508 paragraph (a) • A text equivalent for every non-text element shall be

provided (e.g., via "alt", "longdesc", or in element content).

– W3C Priority 1, checkpoint 1.1• Provide a text equivalent for every non-text element

(e.g., via "alt", "longdesc", or in element content). This includes: images, graphical representations of text (including symbols), image map regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played with or without user interaction), stand-alone audio files, audio tracks of video, and video.


Laws vs. Guidelines508 or W3C?

– W3C is a more international standard– W3C 2.0 has three levels of conformance

• A • AA • AAA

– WCAG 2.0 current - POUR


Laws vs. Guidelines508 or W3C?

– Level AA of WCAG requires use of relative values; no use of absolute values

– Level A of WCAG and Section 508 - absolute values allowable

WCAG 1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)


http://www.w3.org/TR/2008/REC-WCAG20-20081211/%23visual-audio-contrast-scale

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html%23captionsdef

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html%23images-of-textdef

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html%23textdef

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html%23atdef

Web Accessibility Guidelines

Section 508 guidelines Guidelines -

www.section508.gov

Checklist - www.webaim.org/standards/508/checklist


http://www.section508.gov/

http://www.webaim.org/standards/508/checklist

Web Accessibility Guidelines

WCAG GuidelinesGuidelines -

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

Checklist - http://webaim.org/standards/wcag/checklist


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

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

http://webaim.org/standards/wcag/checklist

Accessibility Verification


Accessibility VerificationSome free, online tools for verifying web

accessibility:

WAVE - http://wave.webaim.org/Cynthia Says - http://www.cynthiasays.com/


http://wave.webaim.org/

http://www.cynthiasays.com/

Accessibility VerificationSome free, online tools for verifying web

accessibility:

Achecker - http://achecker.ca/checker/index.phpPowerMapper -

http://try.powermapper.com/demo/powermapper.aspx

Let’s test on a site and see what happens …


http://achecker.ca/checker/index.php



Accessibility VerificationProfessional tools:•Powermapper tools•HiSoftware Compliance Sheriff

Rather complete list of all tools, free and for pay:•WebAIM List of Evaluation Tools


http://www.powermapper.com/index.htm

http://www.hisoftware.com/products/hisoftware-compliance-sheriff.aspx

http://webaim.org/articles/tools/#list

Validating Web PagesValidation and Repair Tools

– Validation tools - perform accessibility analyses of pages or sites and return a report or rating• WAVE - http://wave.webaim.org/index.jsp• Cynthia Says - http://www.contentquality.com/


http://wave.webaim.org/index.jsp

http://www.contentquality.com/

Validating Web PagesValidation and Repair Tools

– Repair tools - tools that assist web authors to modify code to be more accessible. Many such tools are automatic or wizard based. Most include validation tools, as well.• Powermapper tools• HiSoftware Compliance Sheriff


http://www.powermapper.com/index.htm

http://www.hisoftware.com/products/hisoftware-compliance-sheriff.aspx

Validating Web PagesMore tips on validating pages

– Use all alternative browsers available– Consult case studies of users with

disabilities– Test with users with disabilities!– Important considerations for manual +

assisted checks: http://webaim.org/articles/tools/#list


http://webaim.org/articles/tools/#list

Access Techniques


Separating Content from Presentation

Assistive Technology (AT) strips content from presentation and represents it

Code with this in mind, and you will ease the transition from browser to AT mode.– Can be done a variety of different ways– Keep *naked* code– Avoid deprecated tags– Use CSS, etc., to create look and feel


Text Equivalents (images)Navigational elements or bitmap text

– ALL images require descriptive alternative text, “alt text”

– If the image is text, the alt description must be the same as the visual description

– Each area of an image map must have a unique alt description as well as an overall descriptor


Text Equivalents (images)Appropriate alternative text depends

strongly on context. Example: What to call this?


Alt Text Depends on Context


Text Equivalents (images)Navigational elements or bitmap text

– Buttons that are images (NOT code/html generated) require action alt description

RESNA Logo Go to RESNA Home


Text EquivalentsFederal Court Concepts

kwajex.gif (45k)

Email me


http://www.coa.gatech.edu/catea/html/grade/legal/index.html

Text Equivalents (images)Images not important for understanding

– Non-informational & Spacers• Null alt

–<img src=“clear.gif alt=“”>• Allows assistive technology and

accessibility checking software to *ignore* non-informational images


Primer on Alt TextAlt attribute on <img> tag – how to do it correctly:

http://webaim.org/techniques/images/alt_text


http://webaim.org/techniques/images/alt_text

Image MapsAll image maps must be linearized &

contain valid alt text– Create client-side image maps using the “usemap”

command rather than server-side with “ismap” command because server-side maps may require a specific input device

– Use an alt attribute for each <area> tag & make sure that they are distinct from one another


Image Maps


Color & ContrastUsing the palettes in Photoshop

Web safe palette

Deutan color palette

Protan color palette


Color and Contrast

If the colors used in a site have poor contrast, it may be difficult to read for some users.

(i.e. light blue text on light green background)

This text has better contrast, but the heading on this slide is even better.

(i.e. black text on light green background; white or yellow text on black background)


Color & ContrastAvoid using color alone to convey information. Some

statistics:– 1 in 20 visitors to your site will have a color deficiency

(8% of men 4% of women)– Over half (4.9%) of color deficiencies are deuteranomolous

trichromats (green-insensitive) – Use redundant textual cues for all information conveyed in

color alone– Ensure that all information conveyed with color is also

conveyed without color (even think about the colors of active, visited links and how to deliver this contextual information to your color deficient users)

– Keep in mind cultural connotation to color values as well


Color & ContrastWays to avoid color access barriers:

– Switchable Style Sheets– Print design comps on b/w printer– Free preview tools for images and interface

elements to simulate end-user experience (lighthouse, iamcal & vischeck)

– Use published color blindness palettes at the development level for interface elements

– Design for dichromats will accommodate any lesser degree of color deficiency


http://www.lighthouse.org/color_contrast.htm

http://iamcal.com/toys/colors/

http://www.vischeck.com/vischeck/vischeckURL.php

Layout TablesUnless you have a very good reason …

DON’T USE TABLES FOR LAYOUT!AT Linearization

– Null summary <table summary=“”>– If you cannot linearize, provide an alternate

version


Reading Order of Tables

Screen Readers readinformation across tablesin a linear waythereby making itdifficult to understandinformation contained in tables.


Screenreader View of Table

There is a 30% chance of Classes at the University of rain showers this morning, Wisconsin

will resume on but they should stop before September 3rd. the weekend.

“There is a 30% chance of Classes at the University of rain showers this morning, Wisconsin will resume on but they should stop before September 3rd. the weekend.”


Table Accessibility: More?More info on accessible tables, available online at:http://webaim.org/techniques/tables/


http://webaim.org/techniques/tables/

http://webaim.org/techniques/tables/

NavigationConsistent placement of elements

– Ads, navigation bars, content, etc.Create predictability through consistency

– Efficiency, speed, enables “power browsing”

Describe navigational elements– Global, local, content, but in the user’s

language.Group related links with structural markup


NavigationNamed Anchors

– Local link points within a single html page<a name=“content”></a><a href=“#content”>skip to</a>

– Needed to make skip nav methods work


NavigationSkip Navigation

– HTML Link– Linking a clear .gif<a href=“#content”><img src=“clear.gif alt=“skip to main content”></a>

– Invisible HTML Link – simply use text link that is hidden by style sheet


http://www.acb.org/

http://www.assistivetech.net/

NavigationSkip Navigation Examples

– NY times– AssistiveTech– American Foundation for the Blind

–http://www.afb.org/default.aspx


http://www.afb.org/default.aspx

NavigationHelpful techniques:

• Provide navigation bars to highlight and give access to the navigation mechanism.

• Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.– Group sets of links with a group title attribute – title attribute may annotate any number of elements


Cascading Style Sheets (CSS)Uses:

– Fonts– Colors– Backgrounds– Graphical bullets– Positioning– Padding– Indenting– Borders– And a million more!


Cascading Style Sheets (CSS)Purpose/Goal

– Separating Content from Presentation• Redefine HTML tags• Move towards *naked* code• Create a fluid design

– Reduce maintenance– Create site-wide consistency


Cascading Style Sheets (CSS)Custom Classes

– More control– Control whether CSS can be overridden by user defined style

sheet– Modularity & reusability

Style Swapping– Provide different presentation of content– Allows for user customization


http://www.afb.org/default.aspx

Cascading Style Sheets (CSS)Other CSS Examples:

– Texas School for the Blind & Visually Impaired

– CSS Zen Garden


http://www.tsbvi.edu/

http://www.tsbvi.edu/

http://www.csszengarden.com/

http://www.csszengarden.com/

AudioAudio may be inaccessible to people who

are deaf or hard of hearing The same section 508 provision that

applies to images for the visually impaired applies here: –1194.22 – “A text equivalent for every

non-text element shall be provided.”


Audio

Example: http://www.pbs.org/newshour/

Caution: Care must be taken to associate audio files with links to transcripts so that speech output and text-only browsers will make the association clear (i.e., proper positioning and alt text).


http://www.pbs.org/newshour/

Resources for Audio and Video• W3C Multimedia Accessibility FAQ

• WebAIM tools for multimedia


http://www.w3.org/2008/06/video-notes#q1

http://webaim.org/articles/

VideoSection 508 - 1194.22 (b) - Equivalent

alternatives for any multimedia presentation shall be synchronized with the presentation

Since the content must be synchronized, transcripts will not suffice

How to proceed? Captioning.


VideoCaptioning - synchronizes images, audio and text. Captioning makes materials accessible to some, but

more useful to almost everyone. It can present material in multiple sensory modalities,

enhancing the learning experience for all. It also helps those who do not speak the target

language well.Examples:

http://ncam.wgbh.org/invent_build/web_multimedia/mobile-devices/sample-clips




VideoA convenient, free tool for this is MAGpie:The Media Access Generator (MAGpie) was developed

by the National Center for Accessible Media (NCAM). MAGpie makes it easy for multimedia content developers to add captions to their audio and video content. MAGpie provides an environment for developers to listen to their content, add captions and synchronize the captions to the content by adding a timecode to each event.


VideoMAGpie can export the captions to three

multimedia formats: – Microsoft's Synchronized Accessible Media

Interchange (SAMI) format,– The World Wide Web Consortium's (W3C)

Synchronized Multimedia Integration Language (SMIL) format and

– Apple's QuickTime format.


VideoMAGpie has an integrated help center. The

tutorial offers detailed instructions on how to create captions and audio descriptions.

MAGpie: http://ncam.wgbh.org/webaccess/magpie/


http://ncam.wgbh.org/webaccess/magpie/

http://ncam.wgbh.org/invent_build/web_multimedia/tools-guidelines

Video: New Captioning TechnologySony Entertainment Access Glasses


http://www.npr.org/blogs/alltechconsidered/2013/05/12/183218751/new-closed-captioning-glasses-help-deaf-go-out-to-the-movies

What is Assistive Technology? How can it impact Web

Accessibility?


Assistive TechnologyAssistive Technology (AT) - products used

by PWDs to help accomplish task that they can’t accomplish otherwise

Adaptive Strategies - techniques (with or without AT) that are used to accomplish tasks


Assistive TechnologyFor our purposes, two main types:

– General, prosthetic AT - can by anything that helps a person do something that couldn’t otherwise be accomplished

– Web access AT - specific to web access and use


Assistive TechnologyWeb access AT:

–Built-in• Windows• Mac OS

–Add-on• Text to speech• Text browsers


Built-in AT Example


Add-on Web ATAdd-on applications and tools:

–Used in conjunction with web browsers or operating systems

–Common in web applications


Add-on AT Examples


Add-on Web ATFor visual disabilities:

–Text to speech–Text only–Screen magnifiers–Braille and refreshable Braille–Style sheets, tabbing


Add-on Web AT

For physical disabilities:–Alternative keyboards or switches–Speech recognition–Scanning software–Pointing devices–Eyegaze equipment


Add-on Web ATFor hearing disabilities:

–Captioning softwareFor cognitive disabilities:

–Predictive dictionaries–Text to speech + text


Introduction to Web Accessibility (and Usability)

Robert L. ToddUSG, Director, Policy and Partnership

[email protected]

Senior Research ScientistGeorgia Institute of Technology


introduction to web accessibility (and usability)

Documents

accessible web design

accessible introduction

usability introduction

satisfying introduction

design of interfaces

site accessible

design features

online information