introduction to web accessibility (and usability)

Robert L. ToddUSG, Director, Policy and Partnership

Developmentrobert.todd@usg.edu

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 …

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

are effective, efficient and satisfying

• Exhibit – Usable?

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:

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

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

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

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)

Web Accessibility Guidelines

Section 508 guidelines Guidelines -

www.section508.gov

Checklist - 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

Accessibility Verification

Accessibility VerificationSome free, online tools for verifying web

accessibility:

WAVE - http://wave.webaim.org/Cynthia Says - 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 …

Accessibility VerificationProfessional tools:•Powermapper tools•HiSoftware Compliance Sheriff

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

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/

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

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

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

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

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 & 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

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/

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

NavigationSkip Navigation Examples

– NY times– AssistiveTech– American Foundation for the Blind

–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

Cascading Style Sheets (CSS)Other CSS Examples:

– Texas School for the Blind & Visually Impaired

– CSS Zen Garden

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.”

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).

Resources for Audio and Video• W3C Multimedia Accessibility FAQ

• WebAIM tools for multimedia

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/

Video: New Captioning TechnologySony Entertainment Access Glasses

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

Developmentrobert.todd@usg.edu

Senior Research ScientistGeorgia Institute of Technology

introduction to web accessibility (and usability)

accessible web design

accessible introduction

usability introduction

satisfying introduction

design of interfaces

site accessible

design features

online information

Documents

the online experience: accessibility & usability for...

qatar website accessibility / usability best practices...

usability/accessibility testing · usability testing hci...

smarter balanced assessment consortium · 2017-11-27 ·...

usability meets accessibility

accessibility, usability and web standards

world usability day keyboard accessibility 12.11.2009

accessibility, usability and user centred design...

usability & accessibility - mindset then methodology v1.0

designing for web usability and accessibility

smarter balanced · usability, accessibility, and...

usability and accessibility © 2014 the university of...

usability, accessibility, and accommodations · pdf...

usability and accessibility on the web

usability, accessibility, and design evaluation

corephp usability accessibility by steven pignataro

inspiring accessibility, usability, and sustainability

usability trumps accessibility

accessibility, usability and user centred design (usabiltiy)

d2.2. accessibility and usability enhancements for virtual...