Building Accessible Interfaces By Ahmad El Alfy 3 November 2017 – GDG DevFest

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

We are always hiring careers@robustastudio.com

No content

What do you know about Accessibility?

#a11y accessibility #i18n internationalization #l10n localization

No content

People • with special needs • who need special attention and care • suffering from a medical condition

Accessibility means removing the barriers for Everyone* *almost

No content

No content

No content

No content

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.

Why should you care about accessibility?

1- It’s the right thing to do J

2- It’s THE LAW

3- Commercial Reasons … Profit???

Increased accessibility often leads to better usability

How do I start? Let’s start with what you already know!

What’s expected from you • Write semantic HTML Assistive technologies depends on the semantics to provide the user with an enhanced browsing experience.

• Provide alternative content when required • Alternative text for images • Video transcript (subtitles / closed captioning) • Conclusions on charts and complex tables

• Proper use of headings The way you shape your document outline significantly affect how assistive technologies and search engines read your website.

• 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

• Always provide focus state

• 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.

• Use language attribute on HTML and other nodes if required

• Do NOT disable zooming on mobile devices

• Use CSS for presentation J

OK; I want MOAR Progressive Enhancement vs Graceful Degradation

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

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

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

Provide an alternative if it is really difficult to create the basic and advanced scenarios in a single app…

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

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

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

Cognitive disabilities • Memory • Attention • Problem solving • Reading, Linguistic, and Verbal Comprehension

No content

No content

I need to know more about the laws and standards

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.

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.

Specific techniques

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.

But why?

Providing Skip Links

ARIA Roles Accessible Rich Internet Applications ARIA roles are attributes we use to add accessibility information to the HTML tags.

No content

Note when you use ARIA If you can use a native HTML element, do it. Do not use ARIA roles to create it.

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 3. Check the focus attribute كع L

Accessibility testing and resources

However … The best test for accessibility is watching how a real user interact with your work.

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

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

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

Thank you