Web accessibility is important for people with disabilities, especially now due to the COVID-19 pandemic. People are doing more and more online, from ordering groceries, to medications, and even car shopping. In today’s world, it seems that anything can be ordered online, and for most people, it can. But for individuals with disabilities, it may be more challenging or even impossible to access and accomplish these tasks online.
Accessibility isn’t often taught to developers. When introduced, it is usually characterized as a legal requirement for ADA compliance or as part of a contract with a client. However, developing an accessible site is the right thing to do to ensure all users can access the necessary information and make purchases to stay healthy and safe. It may be hard to understand the difficulties a person with a disability will encounter, so I will demonstrate a few visualizations that have helped put me, a developer, in the right mindset.
Helpful Scenarios
Scenario 1: Medical Restrictions
Imagine you are a right-handed person and recently had surgery on your wrist. It’s difficult to use a mouse because you can’t easily move it or click to navigate a website. As an alternative, you try to tab through the site to get to a form. You are able to fill out the form, but the submit button is skipped. It looks like a button and with a mouse acts like a button, but under the hood, it is really a ‘<div>’ with a Javascript event handler and no ‘tabindex=”0”’ applied to tell the browser to land there. Even if it did, if the correct keyboard behaviors aren’t applied hitting the enter key or space bar will not submit the form.
Certainly, it would be possible to use a different hand to select the submit button, but what if that isn’t a possibility? What if you needed a device that depends on keyboard behavior working correctly to use a website? Being able to use a keyboard to navigate a site or application is important to ensure that all users can use it independently. Try testing the websites you develop using only a keyboard and see if all actionable elements are reachable and if they have correct keyboard behavior. For more information, check out WebAim’s Keyboard Guide.
Scenario 2: Visual Impairment with Voice Over Assistance
Imagine you have a visual impairment and are using a screen reader to order a food product and want to ensure that it doesn’t contain an allergen like nuts. The ingredients are hidden until a user expands a button called “ingredients” and shows more information after selecting. The button announces “clickable ingredients.” At this point, there are several things that could happen.
This link could take you to a page with the ingredients, a dialog that opens to display the ingredients, or this could open expanded content that shows the ingredients. Let’s say you selected ‘ingredients,’ but now you hear nothing. You press tab and hear “X” button, but nothing else. In this case, a dialog that is missing ‘role= “dialog”’ and an accessible name (ex. aria-label= “Unicorn Brownie Ingredients” or aria-labeled by pointing to an ID on the dialog’s heading element) has opened, but without that feedback, it is confusing and hard to understand what is happening on the page. At this point, you may abandon this site for one that is more predictable and screen-reader-friendly.
On a site you have developed, try using a screen reader to navigate through a page. There are several free options to utilize, such as Apple products with VoiceOver built-in, NVDA for Windows, and ChromeVox on the Chrome browser. Additionally, Assistive Labs will allow you to use several different screen readers and has a free trial. These options are easily available to you to get a feel for what you will see.
Scenario 3: Optimizing Images and Graphics for Visual Impairment
Now you are a student with a visual impairment reading an online study important to your capstone thesis. You might use software that can zoom in on the screen and provides a high level of text contrast to make it easier to see, or you may opt to use a screen reader. There is a graph with a lot of important information. You can see that there are different colors, but the graph is embedded as an image where zooming is disabled and not accessible to you.
Disabling the zooming keeps you from being able to view the information. You turn on the screen reader, but this is an image with an alternate text of “graph.” The surrounding text does not contain all the information available in the graph. You now must seek alternative ways to access the information, which takes more time or requires help from others. Try zooming in on images or running a screen reader on the images. Is zooming disabled or the images pixelated? Is there important information in graphics that is not otherwise available? Are all tables and graphs accessible to screen readers? For more examples, check out these accessible charts using <canvas> from Paul J Adam. Ensuring that all pages, regardless of the content, contain proper design and markup is important for all users to navigate efficiently and independently.
Now imagine that you’re a student who is colorblind, and you’re reading an online study for research. There is a graph with a lot of important information that is differentiated by colors. You can see that some areas are darker or lighter than others, but there are some areas where it’s difficult to tell the difference between two different colors. This makes it difficult or impossible to interpret the data. There is also no adjacent text that has all the data from the chart. You now must seek alternative ways to access the information, which takes more time or requires help from others. While color choices are usually left to the design team, it’s important to understand that not all users can depend on colors to convey information, and having sufficient color contrast is necessary to understand the information. Meeting the Web Content Accessibility Guidelines (WCAG) criteria for contrast levels is important to help users read and differentiate between sets of content.
Try using the Colorblindly Chrome extension on a site you developed to get a better understanding of what it might look like for a person with colorblindness. It has settings for different types of colorblindness and will give you a sense of how those users see your site. Although the ultimate decision for colors and their placement may be decided well before it comes time to develop, it is important to understand why these decisions matter and why remediation is necessary if it is not accounted for from the start.
We Have to Understand for Users to be Understood
Accessibility is more than just a legal requirement. Keeping in mind how someone with a disability would interact with the page and the challenges presented when the markup and design aren’t accessible helps create a level of understanding and solidifies the ‘why’ behind accessibility requirements. With increased dependency on web applications to perform daily tasks, it’s important to remember why implementing accessibility is so important and the end result. For more information on developing an accessible design with your websites, contact our experience design experts today, download our guide, Digitally Accessible Experiences: Why It Matters and How to Create Them, and check out our Accessibility IQ. Read more about the elements of accessible web design from our UX for Accessible Design series today.
