Post on 24-Nov-2014
transcript
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