Improving Digital Accessibility at BallotReady
See our latest accessibility updates in an interview with our front-end developer, Ella Heron, here.
Why does web accessibility matter?
There are many reasons that accessibility matters in software, but here are a few that inspired our work at BallotReady.
For those with mobility impairments, keyboard navigation is the only way to move around a website. Keyboard navigation allows users to avoid using their mouse and instead they are able to tab through a page and click links only with their keyboard.
Visual impairments can make it difficult to use inaccessible websites. Most blind users rely on screen readers to dictate the text and images on the page, and there are many ways that developers can accommodate this usage.
Finally, accessible websites help everyone! Though not everyone relies on these means to use websites, web accessibility can provide options for different scenarios. For instance, if a user’s mouse or trackpad is broken, they may only be able to use their keyboard. Moreover, while there are users who rely on dark mode websites for their eyesight, many other users simply enjoy having the option to toggle dark mode for night conditions.
How do we improve web accessibility?
There are many different ways to improve your website, but we wanted to showcase some of the improvements we’ve made to the BallotReady voter guide along with some recommendations from our research.
Keyboard navigation
Visibly Focusable Elements
One of the most important aspects of keyboard navigation is to make sure all of the buttons and links on your website are visibly focusable. That way, someone relying on their keyboard to navigate the page (i.e. using tab, enter and space buttons to click buttons/links) can access all of the actionable elements. There are several easy ways to do this
Use the <button> or <a> semantic HTML tags, which are focusable by default.
If you are creating a custom element, you can use role=”button” which is almost the same as using the semantic tag
Using tabIndex=”0”, you can ensure any element like a <div> or <span> can also be focused.
On our site, all of our buttons will underline the inner text when focused so that you can clearly see the focus.
Logical, Sequential Flow
Another important element is to have a logical flow to the website. A user navigating with their keyboard has to follow the flow set up by the focusable items and can not just jump around like a mouse user can.
A “Skip to main content” button can be helpful for users navigating with a keyboard to be able to skip over a lengthy navigation bar. Here’s an example of a truly accessible website that allows all users to easily navigate through the logical flow of the content. Note the skip to main content button, and implement your own with tips from this Medium article.
Screen readers
Aria Attributes
Aria attributes are important values that you can add to any html element to clarify the content.
Aria-label allows you to set a title or name to an element
Aria-labelledby lets you set the title based on the content of another element by id
Aria-expanded is a useful tool for dropdown menus so the user knows if the menu is open or closed
Learn more about all of the aria attributes here
In the BallotReady voter guide, we pay special attention to some elements that have visual cues that may not be visible to blind users. For instance, on the party selection page, there is a check mark next to the party that was previously selected, so we updated the aria label to include “Previously Selected Party” if there is a check.
Links go somewhere, Buttons do something
The line between a link and a button can be blurry- but for accessibility purposes, it’s important to know the difference. Links should be used to navigate away from the current context or page, and buttons should be used to trigger a non-navigational action. In other words, links are used for actions that don’t affect the website at all, because the user is merely browsing through content without engaging in further action.
The distinction between the two matters because screen readers handle the two slightly differently; and ultimately, the goal is to make the user experience as clear and consistent as possible. Here are some examples of togglable items from our voter guide from the perspective of a user navigating through the site with a screen reader:
Color Contrast
Another significant focus when designing for accessibility is choosing colors that sufficiently contrast, thereby having elements being stark enough to distinguish between the two-- meaning the content is visible to the widest range of users. Color accessibility all comes down to the luminosity contrast between foreground and background colors. The minimum ratio standards were defined by the Web Content Accessibility Guidelines, which also provide a plethora of best practices for accessible design. The guidelines state that normal text must meet a contrast ratio of at least 4.5:1. Color contrast compliance can be easily checked by running color choices through a color contrast evaluation tool.
Furthermore, allowing a dark mode option can increase accessibility for users with light sensitivity. It also helps all users to reduce eye strain and screen fatigue. As a general rule of thumb, include both dark and light options in order to allow users to determine what works best for their experience. BallotReady doesn’t currently offer dark mode, but the engineering team is hopeful that the option will be available to users soon.
To ensure that BallotReady’s colors are reusable, consistent, and accessible- we save all our brand color variables (as well as other design components) into a Storybook component library. Building a component library has eased collaboration between design and engineering, and setting standards has given us a benchmark to measure excellence in our build, and creates an overall better user experience.
Straw Test
Straw Test is a way to check a website’s accessibility for visually impaired users who may be using screen magnifiers. To perform the test, make a fist like you’re holding onto a straw, then open your fist just enough to let a "straw" through. Hold your fist up to one of your eyes, close the other, and attempt to navigate your site. Your site passes the straw test if a user doesn’t lose significant context by poor proximity within the lens of a straw. For more information and/or an example, refer to this video.
Glossary of More Resources
Use this checklist when designing for keyboard accessibility to ensure your page is accessible.
Here’s another handy web accessibility checklist with all the success criteria you’ll need for an accessible website.
A quick overview on how to provide and test visible focus for keyboard navigation.
To learn more about screen readers, refer to this video for VoiceOver navigation tips.
Tutorial going over manual accessibility testing and VoiceOver.
Use these resources to ensure you’re using best practices for map accessibility.
Article for having a more accessible map with tips for organizing data, adding styles, and displaying the data as a tooltip.
Another great article covering map accessibility data, color blindness, contrast, and motor skills.
When working on a calendar, these calendar accessibility guidelines will keep you informed on best accessibility practices. Further, this article has a lot of tips and tricks for making better, more accessible calendars.
For modal accessibility; use these modal accessibility guidelines, these best practices for modal windows, and this example implementation of an accessible modal.