Empathy and Accessibility: Building Software for Everyone

“How many opportunities do we have to dramatically improve people’s lives just by doing our job a little better?” — Steve Krug

At Unite Us, we value our role in helping communities connect health and social care. We help partners leverage technology to expand their community resources. Building an accessible platform for all users amplifies their impact in the communities they serve. Whether someone has visual needs or has a preference for keyboard navigation, we recognize the importance of investing in all forms of accessibility. In this post, I will cover a few concepts that have helped us improve our accessibility design, as well as some small changes that can make a big impact in your application.

Know Your Tools

The Web Content Accessibility Guidelines (WCAG) sets recommendations for web content and aims to provide a shared accessibility standard. The guidelines are organized under four principles: perceivable, operable, understandable, and robust. These principles cover how a user may interact with web content. Each principle has testable conformance criteria at three levels: A, AA, AAA.

For example, creating a visual indication of where the keyboard is focused is under the operable principle at conformance level AA. The default border that forms around the focused item helps users identify what part of the application they are currently browsing, so avoid removing CSS outlines by using outline : none. Instead, you can customize the outline with an alternative border style that is compatible across browsers.

Testing accessibility conformance, including visible focus for keyboard navigation can be done manually or with diagnostic tools such as SiteImprove or Lighthouse. SiteImprove can help you diagnose your application’s current conformance state and provide recommendations based on a selected conformance level goal. Lighthouse is a useful Chrome Dev tool used to conduct accessibility scans and provide recommendations for improving accessibility.

With these tools and guidelines in mind, you can explore several approaches when planning accessibility improvements on your web application. Start implementing accessibility best practices today!

Make accessibility a key priority

Make accessibility a core component of your feature development. Tasks should not be considered done until they are up to accessibility standards. Create a standard for your accessibility practices and document them so they are available to your product, QA, and engineering teams. Each team can contribute to the overall goal of creating an accessible product. From including accessibility user stories in the product spec, to staying up-to-date on engineering accessibility best practices and ensuring accessibility acceptance criteria is met. It’s not done until it’s accessible!

Make it simple and uniform

Create reusable components and functions that will enable your team to implement accessibility improvements uniformly across your application. It ensures a consistent experience that benefits users and increases the speed of iteration.

Assess accessibility regularly

Conduct internal manual and tool-enabled audits to assess the current accessibility state and make improvements as needed. Use tools such as SiteImprove and Lighthouse to identify opportunities for improvement and track your progress.

Use ESLint to enforce accessibility rules

ESLint plugins like eslint-plugin-jsx-a11y can help ensure that accessibility rules are implemented comprehensively in your application.

Facilitate keyboard navigation with TabIndex

In order to facilitate seamless keyboard navigation, equip custom elements that should be “tabbable” with a tabIndex attribute. This makes it possible to tab over custom elements alongside regular DOM elements. TabIndex is a standard property of the HTML DOM API.

• A TabIndex of 0 inserts the element into the browser’s default navigation sequence. The browser will go from left to right and left to bottom visiting default and custom “tabbable” elements.
• A positive value TabIndex allows you to override the default order on a per element basis. With a maximum tabIndex value of 32,767 and a potentially confusing user experience, avoid using positive numbers when possible. Rearranging the layout of elements in the DOM can adjust the order without having to use the TabIndex override.
• A negative TabIndex value can be used to remove elements from the keyboard navigation sequence. Combined with JavaScript’s ability to select and manually set focus() on DOM elements, this offers fine grain control for custom widgets, drawers or other UI components.

Your ESLint plugin can also help you ensure that you properly set TabIndex on interactive or clickable elements such as links and buttons.

Consider ARIA attributes and assistive technology

Keep screen readers and other assistive technology users in mind and use ARIA attributes to give your elements accessibility metadata that the browser can read and make available for screen readers. ARIA attributes allow us to convey to the browser information around the role and purpose of non-default elements.

Use unique ID attributes

Avoid breaking accessibility for focusable elements that appear multiple times on your page. For example, if you have table columns or checkboxes, be sure to use unique Ids across the collection of elements. Duplicated Ids may cause inconsistent behavior in screen readers including the omission of repeated elements.

Summary

Accessibility empowers all users and helps make the world an inclusive and better place. By implementing and iterating on accessibility improvements as part of our standard workflows, we can all work towards reaching this goal.

If you would like to learn more about our team, please check out our careers page for open positions. We’d love to hear from you!

Here are some great accessibility resources to check out

• W3.org contains excellent documentation that provides specific examples and related resources for each success criterion.
• https://dequeuniversity.com/rules/axe/3.3/duplicate-id-active
• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
• https://webaim.org/techniques/keyboard/tabindex