web accessibility
DESCRIPTION
Web Accessibility. Rick Ells [email protected] UW Computing & Communications. Disability Types. The major categories of disability types are: Visual blindness, low vision, color-blindness Hearing deafness Motor - PowerPoint PPT PresentationTRANSCRIPT
![Page 2: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/2.jpg)
Disability Types
The major categories of disability types are:
Visual blindness, low vision, color-blindness
Hearing deafness
Motor inability to use a mouse, slow response time, limited fine motor control
Cognitive learning disabilities, distractibility, inability to remember or focus on large
amounts of information
From: Introduction to Web Accessibilityhttp://www.webaim.org/intro/
![Page 3: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/3.jpg)
Who has disabilities?
Visual impairment16% (27.4 million) of working-age adults have a mild visual difficulty or impairment, and 11% (18.5 million) of working-age adults have a severe visual
difficulty or impairment. Dexterity impairment
19% (31.7 million) of working-age adults have a mild dexterity difficulty or impairment, and 7% (12.0 million) of working-age adults have a severe dexterity difficulty or impairment.
Hearing impairment19% (32.0 million) of working-age adults have a mild hearing difficulty or impairment, and 3% (4.3 million) of working-age adults have a severe hearing difficulty or impairment.
From: The Wide Range of Abilities and Its Impact on Computer Technology - A Research Study Commissioned by Microsoft Corporation and Conducted by Forrester Research, Inc., in 2003 http://www.microsoft.com/enable/research/
![Page 4: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/4.jpg)
Web accessibility and the law 1973 – Rehabilitation Act
Prohibits discrimination on the basis of handicap by employers receiving federal contracts or in federally assisted programs
1990 – Americans With Disabilities Act Prohibits discrimination on the basis of disability in employment,
by governmental agencies, and in public accommodations 1998 – Section 508 of the Rehabilitation Act
Requires Federal departments and agencies to take into consideration accessibility when developing, procuring, or using electronic and information technology http://www.section508.gov/
By 2001, all Federal Web sites complied with requirements
![Page 5: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/5.jpg)
Washington State and the UW
UW has long standing policy of providing reasonable accommodation for the handicapped
2005 – Washington State Department of Information Services sets guidelines based on Section 508 for government and educational Web siteshttp://isb.wa.gov/tools/webguide/accessibility.aspx
![Page 6: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/6.jpg)
Technologies and Strategies
Assistive Technologies Alternative keyboards or switches Braille and refreshable braille Scanning software Screen magnifiers Screen readers
Adaptive Strategies Speech recognition Speech synthesis Tabbing through structural elements Text browsers Visual notification Voice browsers
From: How People with Disabilities Use the Webhttp://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/#tools
![Page 7: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/7.jpg)
Device independence
The Goal: Access to a Unified Web from Any Device in Any Context by Anyone
From: Device Independencehttp://www.w3.org/2001/di/
![Page 8: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/8.jpg)
Building in device independence
Organize content in simple hierarchical structure (XML) Easier for each device to receive, interpret, and display
Separate presentation from content (CSS) Allows separate presentation instructions for different
devices
Provide alternatives Example: Text descriptions of graphics
Define associations Examples: Text with form fields, row and column labels
![Page 9: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/9.jpg)
Creating and using accessible content
From: Essential Components of Web Accessibilityhttp://www.w3.org/WAI/intro/components.php
![Page 10: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/10.jpg)
Guidelines and Standards
From: Essential Components of Web Accessibilityhttp://www.w3.org/WAI/intro/components.php
![Page 11: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/11.jpg)
Basic accessible design Keyboard navigable:
A person with poor sight, no sight, or limited dexterity cannot use a mouse.
Standards-compliant: Pages that adhere to standards are easier to design assistive and adaptive client programs for.
Makes sense linearly: Encountering a Web page with a voice browser is a linear process, progressing through the content in sequence or navigating by the structure of the content. A sighted person using a graphic browser can take in two-dimensional spatial arrangements of content and go directly to any visible part.
Provides Alternatives: Provide alternative text for people who cannot see graphics.
Helps make connections: When you can only hear a page, it can be hard to tell which text goes with which form field or which row and column a table cell is in. Simple labeling of text and form field pairs and of rows and columns enables assistive and adaptive programs to correctly present content relationships.
Has no surprises:No sudden pop-up windows or pages that take the reader away from the page they are reading. No links that cannot be tabbed to or evoked by pressing the return key.
![Page 12: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/12.jpg)
10 quick tips to make an accessible Web site
1. Images & animations: Use the alt attribute to describe the function of each visual. 2. Image maps. Use the client-side map and text for hotspots. 3. Multimedia. Provide captioning and transcripts of audio, and descriptions of video. 4. Hypertext links. Use text that makes sense when read out of context. For
example, avoid "click here." 5. Page organization. Use headings, lists, and consistent structure. Use CSS for
layout and style where possible. 6. Graphs & charts. Summarize or use the longdesc attribute. 7. Scripts, applets, & plug-ins. Provide alternative content in case active features
are inaccessible or unsupported. 8. Frames. Use the noframes element and meaningful titles. 9. Tables. Make line-by-line reading sensible. Summarize. 10. Check your work. Validate. Use tools, checklist, and guidelines at
http://www.w3.org/TR/WCAG
From Quick Tips to Make Accessible Web Siteshttp://www.w3.org/WAI/References/QuickTips/Overview.php
![Page 13: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/13.jpg)
Poor form
From: Creating accessible forms, WebAIM, http://www.webaim.org/techniques/forms/
![Page 14: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/14.jpg)
Good form
From: Creating accessible forms, WebAIM, http://www.webaim.org/techniques/forms/
![Page 15: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/15.jpg)
Caption videos
![Page 16: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/16.jpg)
Is your Web page accessible?
1. Check for standards-based, validated coding
2. Evaluate keyboard navigability of the page
3. Evaluate coding and page design
4. Check for Section 508 compliance using WebXact (formerly known as Bobby)
From: Accessibility Evaluation Procedure, AccessibleWeb@U,
http://www.washington.edu/computing/accessible/accessibleweb/eval_proc.html
![Page 17: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/17.jpg)
Accessibility evaluation checklist
1. Are frames appropriately titled? 2. Are ALT tags present and sufficiently equivalent to the graphic content? 3. Are form elements explicitly associated with labels? 4. Is information in PDF available in other more accessible formats? 5. Are all links and navigational elements present and contextually appropriate via the
keyboard? 6. Does the site avoid conveying meaning with color alone? 7. Are data tables marked up as required? 8. Is multimedia content captioned (or if audio only, transcribed)? 9. Is flickering content avoided? 10. Is a skip navigation link present if needed? 11. Is the page functional when scripts are disabled? 12. Is the page functional when style sheets are disabled? 13. Does link text provide a reasonable description of the link target? 14. If a page requires a timed response, can users request more time?
From: Web Accessibility Rubric, Terry Thompson, http://staff.washington.edu/tft/rubric.php
![Page 19: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/19.jpg)
Web application model
From: Ajax: A New Approach to Web Applicationshttp://www.adaptivepath.com/publications/essays/archives/000385.php
![Page 20: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/20.jpg)
Dynamic content
From: Ajax: A New Approach to Web Applicationshttp://www.adaptivepath.com/publications/essays/archives/000385.php
![Page 21: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/21.jpg)
The promise of better interaction
![Page 22: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/22.jpg)
Accessible Web applications
Section 508 Tutorial: Developing Accessible SoftwareDemonstrating principles by developing a calculator in Visual Basichttp://www.access-board.gov/sec508/software-tutorial.htm
Software Applications and Operating Systems (1194.21)Program features that must be contained in software for the product to meet Section 508 standards. http://www.access-board.gov/sec508/guide/1194.21.htm
![Page 23: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/23.jpg)
Dynamic content
Accessible DHTML, Mozilla, accessible Web ap methods supported by FireFox 1.5 and WindowEyes 5.5 http://www.mozilla.org/access/dhtml/
DHTML Accessibility - Fixing the JavaScript Accessibility Problem, Rich Schwerdtfeger and Becky Gibson, IBM, http://www.csun.edu/cod/conf/2005/proceedings/2524.htm
Client-side Scripting Techniques for WCAG 2.0, W3C, http://www.w3.org/TR/WCAG20-SCRIPT-TECHS/
![Page 24: Web Accessibility](https://reader036.vdocuments.us/reader036/viewer/2022062723/56813d12550346895da6cf5c/html5/thumbnails/24.jpg)
Is accessible design worth it?
The handicapped are a valued part of the UW community and they are not going away.
The UW has a national reputation of supporting and accommodating the handicapped.
Your peer developers are already working on this problem (lots of opportunities for conferences and papers).
The methods needed here are already common in other application software.
Doing it right could avoid future hassles for the UW. You, or someone you love, may need adaptive or assistive
technology someday. It’s the human thing to do.