5 Things Every Developer Needs to Know To Get Started with Accessibility
Your guide to building products with Accessibility in mind!
In this series of articles, I want to share ideas, technology trends and innovations in the field of web accessibility and how technology can empower people with disability. Here we go, 5 things every developer needs to know to get started with accessibility…
1. Develop for everyone
Larger Total Addressable Market (TAM) — Building Accessible products increases audience and customer base. In simple terms, if more customers tend to be actively engaged and interested in a product, it is possible to sell more of that product.
It costs less to build a product that’s accessible to start with than to make one compliant. Organizations that embed accessibility early in the product development cycle will significantly benefit as and when the product and customer base matures. Checkout Slack’s accessibility journey (3) as they grew exponentially in the past year or so to be THE platform for workplace communication.
Inclusion spurs Innovation — Apart from legal and compliance reasons, building accessible product fosters a culture of inclusion within organizations. Developers with accessibility expertise can build products that improve usability for everyone, not just for people with disability.
Intuit Accessibility team is doing outstanding work in this space with its innovative ways to make Turbo Tax and QuickBooks accessible to people with disability (that’s changing someone’s financial life). Accessibility initiatives have fostered ‘customer-experience-focused’ environment within Intuit where engineers are innovating and creatively solving for end users. More about Intuit Accessibility here — https://community.intuit.com/articles/1371549-accessibility-features-of-intuit-products
2. Learn about Accessibility Guidelines — WCAG & WA-ARIA!
As George Zamfir, Slack’s Accessibility Product Manager, puts it — “Accessibility touches every facet of a product”.
It infers accessibility has to be built deep into the product to allow assistive technology to interpret web pages (voice over, screen readers and many more). To do so, developers need to be proficient with accessibility guidelines defined by WCAG 2.0 & WAI-ARIA
You could read all about how to meet WCAG requirements using this quick reference guide — https://www.w3.org/WAI/WCAG20/quickref/
For those who need a refresh, here’s a quick glance at WCAG 2.0 principles(4):
Perceivable — Provide text alternatives for non-text content; Provide captions and other alternatives for multimedia; Create content that can be presented in different ways, including by assistive technologies, without losing meaning; Make it easier for users to see and hear content.
Operable — Make all functionality available from a keyboard; Give users enough time to read and use content; Do not use content that causes seizures; Help users navigate and find content.
Understandable — Make text readable and understandable; Make content appear and operate in predictable ways; Help users avoid and correct mistakes.
Robust — Maximize compatibility with current and future user tools.
WAI-ARIA — the Accessible Rich Internet Applications Suite, is a framework to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. More about AIRA(5) here — https://www.w3.org/WAI/intro/aria
3. Set up Developer Tools for Accessibility
Accessibility developers all around the world have open sourced some of the best tools and frameworks to bring awareness early in development process.
Here’s a small set of tools that’ll come in handy during development:
HTML Code Sniffer is an excellent chrome extension that comes with accessibility standards to enforce three conformance levels of the Web Content Accessibility Guidelines (WCAG) 2.0, and the web-related components of the U.S.”Section 508" legislation.
Get the Accessibility Auditor Bookmarklet here (it has identified close to 50million accessibility issues!) : http://squizlabs.github.io/HTML_CodeSniffer/
Google has a suite of tools to develop accessible products and apps:
- For Android applications, ‘Accessibility test framework’ provides libraries for automated accessibility checks — For a given view, libraries run all accessibility checks on all views in the hierarchy rooted at that view and throws exception if errors are found.
Accessibility Test Framework for Android https://github.com/google/Accessibility-Test-Framework-for-Android
- Lighthouse for Chrome — You give Lighthouse a URL to audit, it runs a series of accessibility audits against the page, and generates a report on how well the page performed.
Lighthouse for Chrome — https://developers.google.com/web/tools/lighthouse/
WAVE — Web Accessibility Evaluation tool with chrome and firefox extension is developed by WebAIM.org. It provides visual feedback about the accessibility of your web content by injecting icons and indicators into your page.
Web Accessibility Evaluation tool https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
Lastly, for those looking for web accessibility best practices, Manuel Matuzovic’s has excellent tips for writing HTML and CSS with Accessibility in mind. Read all about it here:
- Writing HTML with Accessibility in mind — https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412
- Writing CSS with Accessibility in mind — https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939
4. Plugin Accessibility into CICD
Continuous integration and delivery is key to faster product cycles and embedding accessibility compliance into “build-test-deploy” pipeline could provide the right level of gating for code pushed to end users.
Here are few things to consider for automated accessibility auditing:
- For ReactJS users, react-a11y is an excellent runtime analysis tool to identify accessibility issues in react.js elements: https://github.com/reactjs/react-a11y
- For progressive web applications, lighthouse could be also used as a node module to run accessibility audits. With the right usage, lighthouse could be configured to enforce test level assertions for accessibility compliance checks: https://github.com/GoogleChrome/lighthouse#using-programmatically
- Eslint-plugin-jsx-a11y — For teams that are already using linting in their projects, accessibility standards could be baked into the application in real-time with this plugin: https://www.npmjs.com/package/eslint-plugin-jsx-a11y
- Axe-Webpack-Plugin — Axe has published webpack plugin to be integrated into development server. Each time webpack finishes compilation, the aXe accessibility ruleset will be run against the app: https://www.npmjs.com/package/axe-webpack-plugin
- Acop — For Java and ruby users on selenium webdriver, Intuit engineers have open sourced accessibility jar and ruby gem to enforce webpage accessibility compliance during automated deployment cycles.
5. Get Involved with Accessibility Community
Web Accessibility community is a vibrant cohort of like minded people with diverse background and skills who come together to build better products. There’s plethora of opportunities to network, share ideas and learn to create products that are accessible to and inclusive of users with different disabilities.
Global events such as Global Accessibility Awareness Day and World Usability Day have events lined up all around the world to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities. You could follow these events at #gbla11yday and #WorldUsabilityDay
A11y meetups have accessibility centric events in several geographical locations so look for an event and join the community.
CSUN Assistive Technology Conference is coming up in March 2018 and its the single largest assistive technology conference in the world with more than 5000 attendees. You could follow all the events at #csunatc18
Wrap Up
If you came this far then then thank you for reading! It’s obvious there’s more than 5 things that you need to know about Accessibility. Hopefully this article will motivate you to learn about accessibility, develop empathy and contribute to the accessibility community.
(2) https://w3reign.com/what-are-web-content-accessibility-guidelines-wcag/
(3) /https://slackhq.com/designing-slack-for-everyone-456002920bf2
(4) https://www.w3.org/WAI/WCAG20/quickref/
(5) https://www.w3.org/WAI/intro/aria
