Web Accessibility
- 1. a11y not just an add-on Vikram Gupta
- 2. Agenda ● Why? ○ Disabilities and why we care? ● What? ○ What exactly is it? ○ Assistive Technologies ○ Myth Busting ○ Compliance Levels ● How? ○ POUR Principles ○ WAI-ARIA ○ Testing
- 3. WHY? Translated into actual numbers ● Over 1 Billion people worldwide have some sort of disabilities. ● Over 253 Million people worldwide live with a vision impairment. ● Over 19 Million children are visually impaired.
- 4. Disabilities
- 5. Myth Busters ● “Web Accessibility” only helps a fraction of the internet users, ● “Web Accessibility” is expensive and time consuming. ● We don’t need to be complaint. ○ WCAG 2.1 --- Standards ○ ATAG 2.0 --- Standards ○ ADA Compliance ○ AODA ○ EN 301 549 ○ Compliance 508 ○ Most of the countries has made WCAG 2.1 AA mandatory for sites.
- 6. SALES PERSPECTIVE - ROI? ● You Attract The People Living With Disability Market ○ In the US alone, people living with vision impairment have at least $175 billion of disposable income ● The Website Is More Appealing. ● Ability To Retain Clients. ● Building Brand Loyalty And Building A Good Reputation ● Selling Disability-Specific Products Web accessibility is a win for the business and a win for every individual looking for a better shopping experience.
- 7. WHAT? “Web Accessibility” is the measure of how effectively all people including those with disabilities, are able to access and use electronic information.
- 8. Assistive Technologies Input Devices 1. Keyboards 2. Trackpads 3. Touch screens 4. Voice activation softwares Output Devices 1. Screen readers 2. Magnifiers 3. Braille Devices
- 9. Compliance Levels ● Level A (minimum) – Addresses the most basic web accessibility features, but does not generally achieve broad accessibility ● Level AA (mid-range) – Addresses most common barriers for disabled users and aligns to the Revised 508 Standards ● Level AAA (highest) – Addresses the highest level of web accessibility, but is not recommended as a general policy, because it is not possible to satisfy all criteria for some content.
- 10. Testing Tools ● Chrome Extensions ○ Wave ○ aXe ○ Siteimprove ○ Lighthouse ○ Accessibility Developer Tools ● Dev Toolbar ○ Accessibility Tab to check the roles and diff. Information ○ Check title and state ● Integration with Build ○ axe-core ○ Axe-cli ● Fixing Tool ○ AI Powered AccessBie.
- 11. How?
- 12. Perceivable ● Text Alternatives for all the non-text content ○ Alt for images ○ transcript/captions for videos/audio while ● Sequence of the text elements ● Display ○ Use proper color contrast(Min 4.5)Check here ○ Font-family ■ Use very few fonts in the site. ■ Arial, Verdana, Tahoma and Sans Serif ○ Text spacing - 1.5 ● Always display focus on current elements like the blue outline. More Details: https://www.w3.org/TR/WCAG21/#perceivable
- 13. Operable ● Make all the functionality available from a keyboard. ○ Tab, Shift + Tab usage ○ Focus elements always in view ○ tabIndex usage(Avoid >0 usage, rather move elements up on DOM) ○ Make even the action less elements available through keyboard ○ No keyboard traps (https://unbxd.com/) ○ Tab from modal back to element focus ● Do not design content in a way that is known to cause seizures or physical reactions ● Skip to content functionality ● Headings and labels describe topic or purpose ○ Ctrl+Opt+U to load all the headings More Details: https://www.w3.org/TR/WCAG21/#operable
- 14. Understandable ● Semantics ○ Use native elements AMAP ○ Table must be used only for tabular content ○ DOM ordering is important. Avoid order fluctuations. ○ Proper use of header, footer, section, aside, button etc. These have implicit semantics and browser knows how to react to them. ● Make text content readable and understandable. ○ Default language ● Error detection (role=’alert’) ● Importance of labels More Details: https://www.w3.org/TR/WCAG21/#understandable
- 15. Robust ● It can be interpreted by by a wide variety of user agents and assistive tech ● Every element must have the following ○ Name ○ Role ○ Value ○ State More Information: https://www.w3.org/TR/WCAG21/#robust
- 16. WAI-ARIA(a11y gaps) ● Add semantics ● Modify semantics ● Express more ● Extra labels and descriptions(aria-label) ● Live updates(role=”alert”) ● Relationships(aria-labelledBy) ● States(aria-checked) ● Properties: https://www.w3.org/TR/wai-aria-1.1/#radiogroup ● More details: https://www.w3.org/TR/wai-aria-practices-1.1/#intro ● Roles: https://www.w3.org/TR/wai-aria-1.1/#introduction
- 17. A11y in conclusion ● Choose Semantic HTML. ● Use built in elements ● Avoid positive Tabindex for setting navigation flow. ● Reach full keyboard access. ● Make Focus and Hover Equal. Use mouseover over mouseenter and mouseout over mouseleave. ● Focus style on elements when using keyboard ● Ensure web pages are functional without CSS. ● Fill accessibility gap with WAI-ARIA. ● Offer text alternatives and more for media content. ● Make text size and color distinguishable. ● Pass audit tool tests.
- 18. UNBXD SDKs and Tools ● All SDKs a11y is a WIP and will be completed soon. ● All the default templates will be made accessible. However, most of our clients use custom templates, so it is the responsibility of the developer to make sure the templates are accessible. They just have to follow up with the above steps. ● There are many free tools as shown above which can be used to test any website accessibility.
Editor's Notes
- #3: Before I start: This is more of a interactive session. Interrupt me whenever you have doubts
- #14: Information to be presented in a perceivable manner. This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white). display.html
- #16: Screenshot