Building Accessible Interfaces

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

Transcript

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
5. What do you know about Accessibility?
6. #a11y accessibility #i18n internationalization #l10n localization
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
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 know!
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 required
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
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.
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