Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web accessibility

Web accessibility

Web accessibility allows users with disabilities to navigate through websites in the same conditions than non-disabled users.
In this presentation we introduce the topic and explain a few guidelines to start implementing it.

Andrés Iglesias

October 31, 2014
Tweet

More Decks by Andrés Iglesias

Other Decks in Programming

Transcript

  1. Content • What is Web Accessibility? • Some definitions •

    Accessibility guidelines • A few guidelines to make our websites more accessible • Conclusions
  2. What is Web Accessibility? • Various definitions • “A web

    site is accessible if people with specific disabilities can use it with the same effectiveness, safety and security as non-disabled people.” • Validity and Reliability of Accessibility Evaluation Methods, Giorgio Brajnik • Not only for people with disabilities • Disability given by the context
  3. Benefits of Web Accessibility • Social • Technical • Financial

    • Legal • Some countries have introduced legislations • Affect public sector web sites • In Uruguay there is a bill
  4. WCAG • Guidelines for making content accessible • Published by

    the W3C • The 2.0 version was published in 2008 • Became an ISO standard in 2012: ISO/IEC 40500:2012 • 12 guidelines under 4 principles
  5. Perceivable • Audio: • Text with the equivalent information Read

    the interview Listen the interview • Video: • Text with the equivalent information • Subtitles
  6. Perceivable • Adaptable • Content can be presented in different

    ways • Separate content and presentation layer • HTML, CSS, JS • Use semantic elements • <h1>, <p>, <ul> • Differences between <strong> and <b>
  7. Operable • Keyboard accessible • Be careful with JavaScript’s “onclick”

    method • <img src=“search.jpg” onclick=“Search();” alt=“Search”>
  8. Operable • Navigable • Bypass blocks • Page titled •

    Focus order • Multiple ways Link to main content Repetitive menu Content
  9. Understandable • Language of the page • Programmatically determined •

    <html …. lang=“en” xml:lang=“en”> • Screen readers, subtitles
  10. Understandable • Indicate clearly required or optional fields • *

    Required information • Identify errors * *
  11. Robust • Content must be robust enough that it can

    be interpreted reliably by a wide variety of user agents, including assistive technologies. • Screen readers
  12. Robust • Validating Central Bank of Uruguay webpage.. • Various

    errors probably caused by a Content Manager • Some images without alt attribute
  13. Accessibility evaluation • Manual evaluation • http://www.w3.org/WAI/WCAG20/quickref/ • Check every

    ‘success criteria’ • 1.1.1 All non-text content that is presented to the user has a text alternative that serves the equivalent purpose…
  14. Example Try to check the currency rates in the ‘Central

    Bank of Uruguay’ webpage with a screen reader
  15. Example - How to improve? • Button to bypass blocks

    • For some content is preferable to use div rather than tables • Lots of news hidden in the HTML • Screen reader’s navigation slower • It would be better to have a “Read all the news” button
  16. Conclusions • Most of the guidelines are not hard to

    implement • It is easier to start thinking about accessibility the sooner as possible • Try to include everybody • Improves the usability and maintainability of your website • Make sure you are not breaking any law