Generative Artificial Intelligence: How generative AI works.pdf
Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)
1. Don’t Flash Your Audience Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites #11nten508 Stuart Holland Dan Mouyard Wendy Stengel
2. Session Evaluation Session Evaluation Each entry via text or web is a chance to win great NTEN prizes throughout the day! TEXT Text 11nten508 to 69866. ONLINE Use 11nten508 at http://nten.org/ntc/eval Session Evaluations Powered By:
43. Speakers Stuart Holland Sr. Web Consultant SHolland@TerpSys.com Dan Mouyard Web Developer DMouyard@TerpSys.com Wendy Stengel Sr. Information Architect WStengel@TerpSys.com
47. SEO / web analytics consultingFounded in 2000, profitable since inception 270 employees, 35 within the web & applications team
48. Session Evaluation Session Evaluation Each entry via text or web is a chance to win great NTEN prizes throughout the day! TEXT Text 11nten508 to 69866. ONLINE Use 11nten508 at http://nten.org/ntc/eval Session Evaluations Powered By:
Notes de l'éditeur
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.
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
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
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/
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
Video without captions Media without context
Navigate site using keyboard Only audio commands
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)
Use text alternatives for content images
Use text alternatives for audio content
Use text alternatives for video content
Alternative text should be used to help tell a story
Alternative text should be used to help explain functionality
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
Always use alt attributes for images, but leave them blank to prevent assistive devices from reading them.
Use CSS for design Don’t use spacer images
Short descriptions Link to a transcript Use captions Open Closed Not just subtitles Sign language interpretation Provide comparable information
Use semantic markup Structure content Attach meaning to specific pieces of contentAllows flexibility in how the content is presented
Use heading to organize sections of content in a hierarchical manner Assistive devices are able to navigation content using headings
Use lists to group related items
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
LegendFieldsets Labels Options
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)
All functionality is operable by keyboard No keyboard traps
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
Create the basic functionality that everybody can access.Use progressive enhancement to add design and functionality.