The User Experience “Keeping Web Accessibility In Mind” Video available online at:

Types of Disabilities Visual (blindness, low vision, color-blindness) Hearing (deafness, hard of hearing) Physical/Motor (weakness, muscle control, paralysis) Cognitive/Neurological (dyslexia, intellectual or memory impairments) Multiple Disabilities (deaf and blind)

Top - points Text description of non-text elements First determine if each image is meaningful or decorative If image is meaningful Write short description (7 to 80 characters long) Add ALT attribute & description to element If necessary, add long description using LONGDESC attribute If image is decorative: Add “empty” ALT attribute of element

W3C WAI WCAGWCAG - 14 guidelines. Each has: The guideline number and statement. The rationale behind the guideline and some groups of users who benefit from it. Checkpoints specific enough for verification and assignment of apriority based on its impact on accessibility. Priority One: Must be followed or it is impossible for 1 or more groups toaccess info in the doc (A-level compliance). Priority Two: Should be followed. Satisfying it will remove significantbarriers for 1 or more groups (AA-level). Priority Three: May be addressed. Satisfying it will improve access (AAAlevel

W3C WAI WCAGWCAG - 14 guidelines. Web Content Accessibility Guidelines (WCAG) 1. Provide equivalent alternatives to auditory and visual content Provide a text equivalent for every non-text element (e.g., via"alt", "longdesc", or in element content) Provide redundant text links for each active region of a serversideimage map Until user agents can automatically read aloud the text,provide an auditory description of the important information of the visual track of a multimedia presentation For any movie or animation, synchronize equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with the presentation.

W3C WAI WCAGWCAG - 14 guidelines. Web Content Accessibility Guidelines (WCAG) 2. Don't rely on colour alone. 3. If using markup and style sheets, do so properly. 4. Clarify natural language usage. 5. Create tables that transform gracefully. 6. Ensure that pages featuring new technologies transformgracefully. 7. Ensure user control of time-sensitive content changes. 8. Ensure direct accessibility of embedded user interfaces. 9. Design for evice-independence. 10. Use interim solutions 11. Use W3C technologies and guidelines. 12. Provide context and orientation information. 13. Provide clear navigation mechanisms. 14. Ensure that documents are clear and simple.

Top - points Text description of non-text elements Lousy: Well Really: More like it:

Top - points Text description of non-text elements - Using LONGDESC What LONGDESC is An attribute of the element When to use it When you need 80+ characters or more to describe an image Probably <5% of all images How it’s used

Top - points Content can be conveyed without color Two main issues Use of color words Color contrast of foreground/background colors

Top - points Content can be conveyed without color Never depend on color alone: you can use color, but not to define sole source of information or meaning Bad Idea:- “Items marked in red must be completed” “Push the green button to start” Good Idea: “Items marked with * must be completed” “Push the button titled “Start” to begin”

Top - points Content can be conveyed without color Never depend on color alone: you can use color, but not to define sole source of information or meaning Need to add emphasis? Use or to add emphasis instead of color Can I still use color? Yes, good use of color = good design

Top - points Content can be conveyed without color Check contrast of text and background colors Desktop tool: Colour Contrast Analyzer Web based: Highest contrast color scheme? Black Text, White background!

Top - points Document should be readable without style sheet Why is HTML structure important? Screen reader software reads a page based on the HTML structure, NOT on the visual organization of page content Checkpoints: Can the page still be read? Can the page still be navigated? Is the organization of the page still clear and easily comprehensible?

Top - points Applets, plug-ins and external content Make your PDF, Word, Excel, PowerPoint, Flash accessible Similar accessibility techniques apply to these file formats Provide links to the software used to view/read the document Examples PDF Adobe Acrobat Reader Word/Excel/PowerPoint Microsoft Office OpenOffice Free Microsoft Office reader

Top - points Skip Navigation Links Each page must have a link that enables a user to jump to the main body content of a page Enables skipping of repetitive navigation links

Top - points Multimedia Considerations Captioning must be done in real-time Captioning must be synchronized with presentation (not a transcript provided later) Webcasts require real-time captioning How to Check: Manual check required How to Fix Captioning Software (MAGPie; HiCaption)

Top - points Multimedia Considerations Bad examples: People with photosensitive epilepsy can have seizures triggered by flickering or flashing Some people with cognitive or visual disabilities can’t read moving text Moving text or images can be distracting How to fix: Remove blinking or flashing elements on a web page Remove banner text that automatically scrolls Remove animated GIFs – they are a nuisance

Quick Guide / re-cap 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.

Quick Guide / re-cap 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