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. 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
  2. People • with special needs • who need special attention

    and care • suffering from a medical condition
  3. 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.
  4. What’s expected from you • Write semantic HTML Assistive technologies

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

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

    document outline significantly affect how assistive technologies and search engines read your website.
  7. • 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
  8. • 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.
  9. 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
  10. 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
  11. 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
  12. Provide an alternative if it is really difficult to create

    the basic and advanced scenarios in a single app…
  13. 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
  14. 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
  15. 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
  16. Cognitive disabilities • Memory • Attention • Problem solving •

    Reading, Linguistic, and Verbal Comprehension
  17. 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.
  18. 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.
  19. 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.
  20. ARIA Roles Accessible Rich Internet Applications ARIA roles are attributes

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

    native HTML element, do it. Do not use ARIA roles to create it.
  22. 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
  23. 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
  24. 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
  25. 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