Web Accessibility

Section 5.8 from

Web Development and Design Foundations with XHTML +

W3C website

Learning Outcomes

In this lecture, you will learn:

◦ What is web accessibility

◦ Importance of web accessibility

◦ Standards of web accessibility

◦ How to evaluate web accessibility

2

Relevance of Web Accessibility

The Web provides an unprecedented

opportunity for people with disabilities:

◦ news, information, commerce, entertainment,

◦ classroom education, distance learning,

◦ job searching, workplace interaction,

◦ civic participation, government services

Access to information has been

recognized as human right by the UN

Convention on the Rights of Persons with

Disabilities (UNCRPD)

Accessibility is for Everyone

Web accessibility benefits many

users:

◦ Low literacy or computer skills

◦ Temporal functional limitations

◦ Situation or external influence

◦ Limited bandwidth connectivity

◦ Legacy hardware and software

◦ Mobile and ambient technologies

People with Disabilities

Web accessibility is about people with

different abilities, including older people:

◦ Auditory - deaf, hard of hearing, ...

◦ Cognitive - dyslexia, intellectual, ...

◦ Neurological - seizures, sclerosis, ...

◦ Physical - missing limbs, paralysis, ...

◦ Speech - talking slowly, not talking, ...

◦ Visual - blind, partial sight, color, ...

They use Assistive Technologies

Defining Web Accessibility

Web accessibility means access to the

Web by everyone, regardless of disability

Web accessibility includes

◦ Web sites and applications ...

◦ Web browsers and media players ...

◦ Web authoring tools, and evolving Web

technologies ...

W3C’s Web Accessibility Initiative (WAI)

Web Accessibility Guidelines

Web Content

Web content has different forms

including:

◦ natural information such as text, images, and

sounds

◦ code or markup that defines structure,

presentation, etc

WCAG

Web Content Accessibility Guidelines

(WCAG) defines:

◦ Accessibility requirements for web content

◦ Techniques for meeting these requirements

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

About WCAG 2.0

Web Content Accessibility Guidelines

(WCAG) is developed through

international collaboration:

◦ Experts

◦ Researchers

◦ Developers

◦ Industry

◦ Policy makers

◦ End-users

WCAG 2 Structure

Principles (4)

◦Guidelines (12)

Success Criteria - Level A (25)

Success Criteria - Level AA (13)

Success Criteria - Level AAA (23) Each success criteria has many Techniques

WCAG 2 Principles

Accessibility principles of WCAG 2:

1. Perceivable (4): Information and user interface

components must be presentable to users in ways

they can perceive.

2. Operable (4): User interface components and

navigation must be operable

3. Understandable (3): Information and the

operation of user interface must be understandable

4. Robust (1): Content must be robust enough that it

can be interpreted reliably by a wide variety of user

agents, including assistive technologies.

To help memorize: P-O-U-R like pouring water.

Example Guidelines

Examples of WCAG 2 Guidelines:

◦ Guidelines 2.1 Keyboard Accessible:

Make all functionality available from a

keyboard

◦ Guideline 3.3 Input Assistance:

Help users avoid and correct mistakes

Example Success Criteria

Examples of WCAG 2 Success Criteria:

◦ 1.1.1 Non-text Content:

All non-text content that is presented to the

user has a text alternative that serves the

equivalent purpose - Level A

◦ 2.2.4 Interruptions:

Interruptions can be postponed or

suppressed by the user, except interruptions

involving an emergency - Level AAA

WCAG 2 Techniques

Techniques are documented separately.

There are three types of Techniques:

◦ Sufficient Techniques - minimum requirements

◦ Advisory Techniques - additional

improvements

◦ Common Failures - often encountered

mistakes

Techniques are Technology-specific (e.g.

HTML, CSS, AJAX, ...)

http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast

Courtesy (Al-Khalifa, 2010)

PRACTICAL EXAMPLES

Text Alternatives

Success Criterion 1.1.1 - Non-text

Content: All non-text content that is

presented to the user has a text

alternative that serves the equivalent

purpose (Level A)

Text Alternatives

Images of text - need to convey the

actual text

Informative images - need to convey

the information

Note: may need longer or shorter

descriptions

Functional images - need to convey

the function

Decorative images - need to have null

(empty) alt

Example of Image and

Long Description

<img alt=“Beta-secretase enzyme”

longdesc=“http://www.csuci.edu/cs-description.htm” src=“cellstructures.jpg” />

Example of Video

Audio / Visual Content – provide closed

captions

Data Tables

Primarily Guideline 1.3 - Adaptable: Create

content that can be presented in different ways

(for example simpler layout) without losing

information or structure:

◦ Success Criterion 1.3.1 - Info and Relationships:

Information, structure, and relationships conveyed

through presentation can be programmatically

determined or are available in text (Level A)

◦ Success Criterion 1.3.2 - Meaningful Sequence: When

the sequence in which content is presented affects its

meaning, a correct reading sequence can be

programmatically determined (Level A)

Exercise

Compare the implementation of the data

tables on these two demo pages:

Demo: Inaccessible Tickets Page

Demo: Accessible Tickets Page

Data Tables

Provide row and column headings

Identify any cell relationships

Consider the information design

Forms and Labels

Guideline 1.1 - Text Alternatives

Guideline 1.3 - Adaptable

Guideline 2.1 - Keyboard Accessible

Guideline 2.2 - Enough Time

Guideline 1.4 - Navigable

Guideline 3.2 - Predictable

Guideline 3.3 - Input Assistance

Guideline 2.1 - Keyboard Accessible

Logical tab order through links, form

controls and table cells

◦ tabindex attribute

Keyboard shortcuts to important links

◦ accesskey attribute

Exercise

Compare the coding of and interaction

with the forms on these two demo pages:

Demo: Inaccessible Survey Page

Demo: Accessible Survey Page

EVALUATING WEB ACCESSIBILITY

Why Evaluate?

Evaluation should be carried out

throughout the development process:

◦ Get a quick, rough idea of the website

◦ Learn about general or specific issues

◦ Investigate particular issues or aspects

◦ Testing of features during development

◦ Get objective opinion on conformance

◦ Get comprehensive feedback analysis

◦ Monitor on-going accessibility progress

Incremental Assessment

Steps to effectively assess and improve

your website for accessibility:

◦ Carry out preliminary evaluation

◦ Fix obvious accessibility issues

◦ Carry out conformance evaluation

◦ Fix obvious accessibility issues

◦ Carry out evaluation with users

◦ Fix obvious accessibility issues

◦ Work with users to resolve issues

◦ Continue to monitor your progress

Skills for Evaluation

Web accessibility evaluation can be done

by people with different skills:

◦ Some aspects can be checked by anyone

◦ Some aspects need technical expertise

◦ Some aspects need knowledge of users

◦ Some aspects need usability expertise

Sampling Web Pages

Representative samples should include

pages developed by different people and

that include different features (such as

lists, tables, forms, etc.); in particular:

◦ Templates, style sheets, snippets

◦ Home page, other important pages

◦ Frequently-used, high traffic pages

◦ Critical paths and full processes

Prioritizing Repairs

After evaluation, you may need to

prioritize what to fix first:

◦ Impact on accessibility

◦ Frequently accessed pages

◦ Pages with significance

◦ Logically related pages

◦ Logically related repairs

Evaluation Tools Types

There are many different types of web

accessibility evaluation tools:

◦ Fully automated

◦ Semi-automated

◦ In-page feedback

◦ Wizard interface

◦ Developer tools

List of Web Accessibility Evaluation Tools

Problem with Evaluation Tools

Web accessibility evaluation tools have

substantial limitations:

◦ Only few requirements are automatable

◦ Tools may be misleading or imprecise

◦ Prone to false positives or negatives

Selecting Web Accessibility Evaluation

Tools

Summary

This chapter introduced web accessibility.

WCAG 2.0 Accessibility guidelines

Examples of accessible and inaccessible

web page elements

Evaluation process and tools types.

Disclaimer

◦ The slides were adapted from Shadi Abu-

Zahra presentation:

http://www.w3.org/Talks/2010/06-WAI-BPE/37