Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)

Editor's Notes

• #4: Welcome to Don’t Flash Your Audience: How to build dynamic yet accessible sites. We appreciate your coming out this morning, and look forward to sharing our passion for the whats, whys, and hows of building accessible, user-friendly websites.My colleague Stuart will go over what accessibility is, and how it benefits your organization. He’ll also show you several tools for evaluating your website’s accessibility. Dan will tell you how to put accessibility into action, regardless of how you’re managing your web content. We’ll leave time for questions and answers, and a discussion of what’s on the horizon, at the end of our talk.
• #5: Visual Blindness Low vision Macular degeneration Retinitis pigmentosa Considerations Color blindness Epilepsy Auditory Mobility No mouse Cannot use a mouse No pointing devices (mobile devices) No keyboard No input device Cognitive Larger population than other three combined Large variety Hardest to test General practices Simple Clear User-friendly / tolerant
• #7: General Benefits Statistics Conflicting reports CDC: http://www.cdc.gov/nchs/fastats/disable.htm 19.4 million with vision trouble 34.5 million with hearing trouble 35.6 million with physical difficulties Census: http://www.census.gov/hhes/www/disability/disability-poster.pdf More site visitors Legal Obligation Government agencies: Section 508 Updated version is forthcoming Will follow WCAG 2.0 standards Disney is currently being sued Target lawsuithttp://www.w3.org/WAI/bcase/target-case-study Net result: $6 million Ethical/Moral ObligationWould you build a restaurant today without ramp access? Associations & Non-profits: Why would you exclude part of the community you are trying to reach out towards? Additional Benefits Mobile friendly SEO
• #8: http://www.w3.org/WAI/RC/tools/complete
• #10: http://wave.webaim.org/
• #11: Disney.com without CSS
• #12: Disney.com without JavaScript
• #13: Disney.com without images
• #14: Lynx: http://tools.sucuri.net/?page=docs&title=text-browserWebbIE: http://www.webbie.org.uk/
• #15: JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp Thunder Screen Reader: http://www.screenreader.net/
• #16: Before designinghttp://gmazzocato.altervista.org/colorwheel/wheel.phphttp://www.snook.ca/technical/colour_contrast/colour.html Firefox Contrast Checker: https://addons.mozilla.org/en-US/firefox/addon/wcag-contrast-checker/
• #17: External documents posted on a site also need to be accessible (or have accessible equivalents) PDFs Word Documents Excel Spreadsheets Content as web pages are usually more accessible than as documents
• #18: Video without captions Media without context
• #19: Navigate site using keyboard Only audio commands
• #20: The key to building accessible sites is to make them Perceivable, Operable, Understandable, and Robust.Main Techniques (http://www.w3.org/WAI/WCAG20/quickref/) Text alternatives Adaptable content Distinguishable content Keyboard accessible NavigableText AlternativesText is easily adaptable (Large print, Braille, Speech, Symbols, Translation)
• #21: Use text alternatives for content images
• #22: Use text alternatives for audio content
• #23: Use text alternatives for video content
• #24: Alternative text should be used to help tell a story
• #25: Alternative text should be used to help explain functionality
• #26: Text should make sense when read/spoken with surrounding text Screen readers: 300 words/minute Short & to the point Avoid redundant text (combine image & text links) Link to longer explanations
• #29: Always use alt attributes for images, but leave them blank to prevent assistive devices from reading them.
• #30: Use CSS for design Don’t use spacer images
• #31: Short descriptions Link to a transcript Use captions Open Closed Not just subtitles Sign language interpretation Provide comparable information
• #32: Use semantic markup Structure content Attach meaning to specific pieces of contentAllows flexibility in how the content is presented
• #33: Use heading to organize sections of content in a hierarchical manner Assistive devices are able to navigation content using headings
• #34: Use lists to group related items
• #35: Only use tables for tabular data Use the <caption> element to provide a title for the table Use the summary attribute to explain the table Use the scope attribute to associate headers with data
• #36: LegendFieldsets Labels Options
• #37: Separate foreground from background Readable text Font Size Resizable (up to 200%) Color contrast Line height Measure Text in images Audio ControlAudio contrast (minimize background)
• #38: All functionality is operable by keyboard No keyboard traps
• #39: Clear navigation Limit the number of links per page Visually distinguish links Findable content Discernable current location Bypass repeated blocks Able to skip content repeated on multiple pages Skip links Page titles Focus Order Visible Link purpose Multiple ways to access content
• #40: Create the basic functionality that everybody can access.Use progressive enhancement to add design and functionality.
• #42: WAI-ARIA Updated 508 guidelines HTML5