a framework for building web sites that are friendly to visually impaired
DESCRIPTION
Proper access to World Wide Web has emerged as an essential need for all kinds of groups in society. There is no apparent alternative to it in most disciplines where it is highly involved. Therefore it is crucial to make the World Wide Web accessible for every person regardless of his or her capabilities, social status, purchasing power, etc. One potential group that can be discriminated with regards to web accessibility is visually impaired because of the strong tendency of web sites and applications towards visual consumption. In recent years various bodies have been emphasizing the need for making web friendlier to visually impaired people, which resulted in generating a significant pressure on web content providers. On one side, laws are being imposed that strengthen visually impaired people to prompt legal action against organizations that ignore them. On the other hand social value systems have changed so that the value of a business can depend on the degree of support offered towards differently abled people. The challenge in making web content more accessible for visually impaired have been attacked in different fronts. Major software platform providers have included lot of supportive features such as voice capabilities in their products. Web development agencies also have started paying attention on accessibility during the development process. This paper includes a study on different types of visual impairments and recommended means of addressing them. It also sheds light on guidelines for developing web sites and applications that are friendly to visually impaired. Output of the research also includes a framework and a convenience tool that can be immensely useful during implementation of accessible web sites and applications.TRANSCRIPT
A FRAMEWORK FOR BUILDING WEB SITES THAT ARE FRIENDLY TO VISUALLY IMPAIRED
Helani WanniarachchiDileepa Jayathilake
ICTER 2012
Line up
Web Accessibility
Visual Impairments
THE NEED
State of the Art NEW
SOLUTIONNew Tool in Action
Web Accessibility
“The power of the Web is in its universality... Access by
everyone regardless of disability is an essential
aspect…”
Tim Berners-Lee
Yet, Web is primarily meant for visual consumption which makes accessibility barrier for visually impaired users.
NEED FOR ACCESSIBILITY
• Social factors• Business factors• Legal and policy factors
Making even grounds Winning the market Conforming to the law
Complete the markets by serving chronically underserved
• Differently abled people• Senior population• Less experienced web users• Illiterate• Consumers of low bandwidth connections• Mobile users
Investment on web accessibility pays back!!
• Better treated by search engines• Exposition of corporate social responsibility• Reduced legal risk• Increased customer loyalty
Visual Impairments
Total
Blind
• No Perception of Light (NPL)• Require an audio presentation of information
LowVision
• Weak visual acuity to light perception or deficient visual field• Require magnifying and color contrast techniques and audio
Color blin
d
• A deficiency or absence in the photosensitive cells in the eye• Require alternatives to present information associated with
colors
86%
14%
Low VisionTotal Blind
90%
10%
In developing countriesIn developed countries
65%
35%
Aged 50 and olderOthers
285 million people are visually impaired
worldwide
Why need accessibility evaluation and authoring tools?
Source: http://www.w3.org/WAI/intro/components.php
Components of Web Accessibility• Require expertise
• Time and labor intensive
• Lack of experience
Existing Support
A technical specification
Describe roles, states, and properties for custom widgets
Notify dynamic contents
Web Accessibility Initiative – Accessible Rich Internet
Applications Widely accepted
Up to date
User agents and AT conform
Generic and technology neutral
Well structured and classified properly
Web Content Accessibility Guidelines
+Web Accessibility Generator
Specialization in achieving accessibility for visually impaired
A platform independent solution (OS, Browser agnostic)
Familiar development environment
An extensible framework
Providing guidelines and methods to implement accessibility features
Evaluation based on priority and visual impairment type
Solution Overview
Web accessibility features specification
Web Accessibility
FeaturesUnderstandable
Perceivable Operable
Robust
Text alternatives, captions and other alternativesAdaptable: present in simpler layoutsDistinguishable: make it easier to see and hear content
Make all functionality available from a keyboardProvide enough time to read and use content Easy navigation
Make text readable and understandableHelp users avoid and correct mistakes
Maximize compatibility with variety of user tools
Rules selection criteria
High
priority
• Rules that must be satisfied. Unless satisfying them the content is inaccessible.
Medium priority
• Rules that should be satisfied. Unless satisfying them the content can be accessible with difficulties.
Low priority
• Rules that are good to be satisfied. Unless they are satisfied, accessing the content may be somewhat difficult.
Level A
High + Medium + Low
Level BHigh + Medium
Level CHigh
Rules corpus Priority Disability
1. Text alternative for images High TB + LV + CB
2. Text or audio alternative for videos High TB + LV + CB
3. Text description for color cues and phrase elements High TB + LV + CB
4. Caption and summary for data tables High TB + LV
5. Paragraphs instead of data tables Medium TB + LV
6. Proper labeling for form controls High TB + LV
7. Enhanced visual presentation of text Medium LV + CB
8. Contrast color for visual cues Medium LV + CB
9. Keyboard control for all functionality High TB + LV
10. Bypass repeated content High TB + LV
11. Meaningful page title High TB + LV
12. Purposeful link text High TB + LV
13. List of content Medium TB
14. Sequential navigation Medium TB
15. Definitions for the unusual words Medium TB + LV
16. Explanations for abbreviations Low TB + LV
17. Input assistant using ARIA properties low TB + LV
18. Tab order to receive focus High TB + LV
WAG system
Open source file
Select scan criteria and scan
Display accessibility violations list
Select an accessibility violation
Highlight in code & show details
Fix or Skip the violation
Apply changes
Update list & progress bar
Deploy the modified source
Render the new web page
Use case diagram
System Design
Implementation
Flow chart
Feature
title disability_rank priority description solution rule
Rule
violations array
evaluate (xml code) { }
Result
id feature element line status resetLine () {}setStatus () {}
Report
resultstotal: 0resolves: 0skips: 0
Create () {}Update () {}
Scanner
issuesprioritydisablity_rank
Scan () {}Filter () {}
Object diagram
Data Model
• Accessibility feature• Applicable disability• Priority level• Error message• Description• Solution
<FEATURE id="1"><TITLE> Text alternatives for images</TITLE><DISABILITY rank="2">Blind, low vision, color blind</DISABILITY><PRIORITY> High </PRIORITY> <ERROR> Image missing alternative text </ERROR><DESCRIPTION>
Provide meaning of image content with text alternatives</DESCRIPTION><SOLUTION>
Add ‘alt’ attribute on ‘img’ elements</SOLUTION>
</FEATURE>
Knowledgebase API
Scan criteria ( Feature Valid = Priority_valid && DisabilityRank_valid )
PRIORITY VALIDATION
Selected priority
Feature priority
Validity
A (3) High (1) TrueA (3) Medium (2) TrueA (3) Low (3) TrueB (2) High (1) TrueB (2) Medium (2) TrueB (2) Low (3) FalseC (1) High (1) TrueC (1) Medium (2) FalseC (1) Low (3) False
DISABILITY RANK VALIDATION
Selected disability rank
Valid ranks of features
2(Total Blind)
2, 6, 10, 30
3(Low Vision)
3, 6, 15, 30
5(Color Blind)
5, 10, 15, 30
Disability Rank = Product of ranks of each applicable disability
Future Work
• Extend support for DHTML• Add support for assistive devices• Autocorrection
Thanks !