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

Building Accessible Interfaces

Ahmad Alfy
November 03, 2017

Building Accessible Interfaces

Presentation I gave to GDG DevFest 2017 in Cairo on 3rd November 2017

Ahmad Alfy

November 03, 2017

More Decks by Ahmad Alfy

Other Decks in Programming


  1. Building Accessible Interfaces By Ahmad El Alfy 3 November 2017

    – GDG DevFest
  2. Who Am I • Wrote my first HTML document 20

    years ago • Practicing Front-end development professionally for the past 10 years • Head of software development at Robusta • Facebook Developers Circle Cairo Lead • Web Standards and Accessibility fanatic Facebook: Ahmad Alfy Twitter: @ahmadalfy Ask.fm: ahmadalfy
  3. We are always hiring careers@robustastudio.com

  4. None
  5. What do you know about Accessibility?

  6. #a11y accessibility #i18n internationalization #l10n localization

  7. None
  8. People • with special needs • who need special attention

    and care • suffering from a medical condition
  9. Accessibility means removing the barriers for Everyone* *almost

  10. None
  11. None
  12. None
  13. None
  14. And there is more! • As a student who is

    in a quite library room, I want to watch a lecture video in silence without disturbing the people around me. • As a student with no room for elbow movement using a tiny trackpad, I want the clickable links to be large enough and adequately spaced. • As a user who is easily distracted, I want the content that I read online to have clear headings. • As a user whose internet connectivity is slow and bandwidth is limited, I want to be able to visit websites while disabling images.
  15. Why should you care about accessibility?

  16. 1- It’s the right thing to do J

  17. 2- It’s THE LAW

  18. 3- Commercial Reasons … Profit???

  19. Increased accessibility often leads to better usability

  20. How do I start? Let’s start with what you already

  21. What’s expected from you • Write semantic HTML Assistive technologies

    depends on the semantics to provide the user with an enhanced browsing experience.
  22. • Provide alternative content when required • Alternative text for

    images • Video transcript (subtitles / closed captioning) • Conclusions on charts and complex tables
  23. • Proper use of headings The way you shape your

    document outline significantly affect how assistive technologies and search engines read your website.
  24. • Proper markup for forms • Always use labels for

    input even if it is invisible. • Always use labels for checkboxes and radio buttons. • Don’t you ever use placeholder text as labels. • Always include a submit button even if it is invisible
  25. • Always provide focus state

  26. • Careful with the tabindex! The tabindex global attribute is

    an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. • a negative value the element should be focusable, but should not be reachable via sequential keyboard navigation; • zero the element should be focusable and reachable via sequential keyboard navigation; • a positive value the element should be focusable and reachable via sequential keyboard navigation; its relative order is defined by the value of the attribute.
  27. • Use language attribute on HTML and other nodes if

  28. • Do NOT disable zooming on mobile devices

  29. • Use CSS for presentation J

  30. OK; I want MOAR Progressive Enhancement vs Graceful Degradation

  31. Progressive Enhancement You start with the basic and accepted functionality

    and build on top of it to enhance it. Infinite scrolling in Reddit as an example
  32. Graceful degradation You start with the best experience you want

    to deliver then degrade it to the basic if the user is not capable of handling it CSS as an example
  33. And there is more! • Do you have a header

    with a SUPER FAT images with white text on it? Be responsible, add background image to the slide. • What about that blocking loader that you shamefully added and blocked the web page till all your content are loaded? Be friendly, Remove that loader • What about those contents that animate into view when the user scroll and the user have JavaScript disabled? Provide an alternative version for non-js environment please
  34. Provide an alternative if it is really difficult to create

    the basic and advanced scenarios in a single app…
  35. Provide better user experience Provide better control with keyboards like

    • Navigation with arrows for sliders • Navigation with arrows for photo galleries • Closing modal windows using the escape character • Submitting a form using the Enter • Submitting a form using CTRL + Enter when focusing a textarea • Increase / Decrease numerical values when focusing a number field
  36. Start thinking of these people • People with really slow

    / expensive internet connections • CSS OFF • Images OFF • JavaScript OFF • People with limited devices / browsers capabilities • Old browsers (institutes with OS policies) • Proxy browsers (Opera mini) • People with physical disabilities
  37. Disabilities • Accidents and injuries Preventing the use of mouse

    and trackpads. Your website / application should be tested without using a mouse. Focusable areas should be identified when focused, clickable areas should be large enough and well spaced. • Problems with vision • Complete blindness Screen readers • Color blindness Do not depend on colors only to convey information (warning and error messages, underline for links … etc) • Poor sight Use relative values, do not prevent zooming-in
  38. Cognitive disabilities • Memory • Attention • Problem solving •

    Reading, Linguistic, and Verbal Comprehension
  39. None
  40. None
  41. I need to know more about the laws and standards

  42. Section 508 • Section 508 is a part of the

    Rehabilitation Act mandate that all websites should be accessible if a website is federally funded. It will be forced in Jan 2018. • Items on the law are well extracted into checklist on the WebAIM project on http://webaim.org/standards/508/checklist • Most of the items in this checklist is easily applicable if you are writing proper and semantic HTML and providing usable alternative for multimedia like images and videos.
  43. WCAG 2.0 Web Content Accessibility Guidelines • Developed through the

    W3C with a goal of providing a single shared standards for web content accessibility. • WCAG is divided into 4 principles, each section contain related guidelines: • Perceivable Information and user interface components must be presentable to users in ways they can perceive. • Operable User interface components and navigation must be operable • Understandable Information and the operation of user interface must be understandable. • Robust Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
  44. Specific techniques

  45. Providing contents for screen-readers only We can use CSS to

    hide content visually from the screen while keeping it for the screen-readers to read it.
  46. But why?

  47. Providing Skip Links

  48. ARIA Roles Accessible Rich Internet Applications ARIA roles are attributes

    we use to add accessibility information to the HTML tags.
  49. None
  50. Note when you use ARIA If you can use a

    native HTML element, do it. Do not use ARIA roles to create it.
  51. 60 seconds accessibility testing By David Kennedy: 'Web Accessibility in

    60 Seconds' 1. Check document outline (headings) 2. Strip the CSS and see the naked <body> 3. Check the focus attribute كع L
  52. Accessibility testing and resources

  53. However … The best test for accessibility is watching how

    a real user interact with your work.
  54. Finally • Accessibility is not a feature or a constrain.

    It’s a set of practices you should incorporate in your normal work. • Accessibility is not a checklist. It’s a holistic approach affecting everything we do. • Remember: We are not trying to meet specific needs. We are aiming for maximum flexibility
  55. Your mission starts today • Start writing accessible websites and

    web applications today. • Spread the word about the importance of the accessibility. Today Them – Tomorrow Us
  56. Our focus on this workshop is: • Document outline; using

    headings properly • Accessible forms • Using text for screen-reader • Tab index, focus • Accesskeys • Color blindness • Skip link • ARIA-Roles • Alt attributes for images • Writing down an accessibility document
  57. Thank you