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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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: 19.4 million with vision trouble 34.5 million with hearing trouble 35.6 million with physical difficulties Census: 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 lawsuit 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
  • without CSS
  • without JavaScript
  • without images
  • Lynx:
  • JAWS: Thunder Screen Reader:
  • Before designing Firefox 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 ( 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
      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 11nten508 to 69866.
      Use 11nten508 at
      Session Evaluations
      Powered By:
    • 3. Introduction
    • 4. Defining Accessibility
    • 5. Ranges/Degrees
    • 6. Benefits of Accessibility
    • 7. Evaluation Tools
    • 8.
    • 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>Another Heading</h2>
    • 33. Lists
    • 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
      Dan Mouyard
      Web Developer
      Wendy Stengel
      Sr. Information Architect
    • 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 11nten508 to 69866.
      Use 11nten508 at
      Session Evaluations
      Powered By: