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