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


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


Web Content Accessibility Guidelines (WCAG) defines:
◦ Accessibility requirements for web content

◦ Techniques for meeting these requirements


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


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


Courtesy (Al-Khalifa, 2010)


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)

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

Compare the coding of and interaction with the forms on these two demo pages:  Demo: Inaccessible Survey Page  Demo: Accessible Survey Page


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

This chapter introduced web accessibility.  WCAG 2.0 Accessibility guidelines  Examples of accessible and inaccessible web page elements  Evaluation process and tools types.

◦ The slides were adapted from Shadi AbuZahra presentation: http://www.w3.org/Talks/2010/06-WAI-BPE/


Sign up to vote on this title
UsefulNot useful