Don’t Flash Your Audience: How to Build Dynamic yet Accessible Sites(11nten508)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 557 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
557
On Slideshare
557
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
15
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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
  • http://www.w3.org/WAI/RC/tools/complete
  • http://wave.webaim.org/
  • Disney.com without CSS
  • Disney.com without JavaScript
  • Disney.com without images
  • Lynx: http://tools.sucuri.net/?page=docs&title=text-browserWebbIE: http://www.webbie.org.uk/
  • JAWS: http://www.freedomscientific.com/products/fs/jaws-product-page.asp Thunder Screen Reader: http://www.screenreader.net/
  • 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.
  • WAI-ARIA Updated 508 guidelines HTML5

Transcript

  • 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:
  • 3. Introduction
  • 4. Defining Accessibility
  • 5. Ranges/Degrees
  • 6. Benefits of Accessibility
  • 7. Evaluation Tools
  • 8. Disney.com
  • 9. WAVE
  • 10. Disable CSS
  • 11. Disable JavaScript
  • 12. Disable Images
  • 13. Plain Text Browsing
  • 14. Screen Readers
  • 15. Visual Contrast Testing
  • 16. External Documents
  • 17. Auditory Testing
  • 18. Mobility Testing
  • 19. Putting Accessibility into Action
  • 20. Images
  • 21. Audio
  • 22. Video
  • 23. Part of the Story
  • 24. Explain Functionality
  • 25. Remember the Context
  • 26. Content Images
    <img alt="short" />
  • 27. Link to Longer Descriptions
    <img alt="short" longdesc="long.html" />
  • 28. Decorative Images
    <img alt="" />
  • 29. Use CSS
  • 30. Audio/Video Text Alternatives
  • 31. Adaptable Content
  • 32. Headings
    <h1>Page Title</h1>
    <h2>Heading</h2>
    <h3>Subheading</h3>
    <h2>Another Heading</h2>
  • 33. Lists
    <ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
    <li>Kiwi</li>
    </ul>
  • 34. Tables
  • 35. Forms
  • 36. Distinguishable Content
  • 37. Keyboard Accessible
  • 38. Navigable
  • 39. Dynamic Functionality
  • 40. jQuery UI
  • 41. On the Horizon
  • 42. Q&A
  • 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
  • 44. TerpSys Overview
    We delight our customers!
    We help organizations use technology to achieve their missions
    We offer networked & web based solutions including:
    • Website design & development
    • 45. Interactive & visual design
    • 46. Branding
    • 47. SEO / web analytics consulting
    Founded 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: