What is Web Accessibility?
You may have heard on the news that the Supreme Court has recently denied Dominos Pizza’s petition to be appealed by the Court of Appeals on October 7, 2019. This opens the door to the plaintiff, Guillermo Robles to sue Domino’s for not meeting the necessary accessability requirements to provide service to those with functional disabilities. In this case, Mr. Robles has vision impairment which would require the assistance of a screen reader application to operate the Domino’s Pizza website.
To put things in perspective, according to the Center for Disease Control and Prevention, 26% of adults in the United States has some type of disability. Of those 26% adults, 4.6% have some form of vision impairment and 5.9% are deaf or have problems hearing. Creating more accessible websites not only benefits those with disabilities, but can also help those who are not as familiar with web technology have a more intuitive experience.
There are a few quick things that can be done to make your user experience much better!
HTML Markup Accessibility wins
Images and Icons
Most websites employ images or icons to represent something of importance to users. In the case of images not being loaded or representing a clickable link leading the user through some process, making use of the alt html attribute provides a text-alternative to an image.
It not only acts as a fallback incase of a slow connection or error that would not render the image, but also provides text readable by a screen reader.
This would help those who rely on screen readers to be able to navigate a website which may leverage icons and images heavily in it’s user story. For example:
- A user wants to order a pizza.
- The order process is a 3 step process.
- There are arrows like &U+27a1; that users must click to proceed to the next step.
This is a pretty common workflow for websites providing some kind of service. If an alt attribute is not provided to the icon or image, users using a screen reader would not be able to figure out the next step of the workflow.
As the screen reader relies on this attribute to provide a text description to what it represents, it would simply skip over it as if it doesn’t exist.
A good solution would be to have an alt as alt="Proceed to Order Confirmation Page [Click Here]" or something to convey what this icon or image does for the user.
Labels for Elements
We have buttons all over our websites, elements that provide utility to our users when they are trying to do an action. Many times, we don’t label our buttons as “Close”, but may indicate a close with X instead. Other examples may include Open and Download, both of which are actions that are pretty crucial to a interactive page.
With screen readers, it would be able to read what the element is, but hearing X or some unicode it can’t interpret isn’t very informative to what it does.
Adding an aria-label to an element would be beneficial by providing screen reader readable text for users that can’t use the webpage to visually see what X, Open, and Download do.
A possible scenario could be:
- A user is viewing a shipping page for a product they purchased.
- The user clicks on
View Order Details. - A modal appears in the middle screen with the order details.
- There is a × clickable icon to close the modal.
While one could listen to the screen reader over and over again to eventually figure out that the X is the close button, this is not ideal at all.
This will not only frustrate the user, but set the precedence in terms of accessibility for the rest of the experience using the platform.
To make this experience better, we can leverage the aria-label property to pass the right information to the screen reader.
This would look like:
<a href="#" aria-label="Close Receipt Info Box [Click Here]">×</a>
Conclusion
As developers who want to provide a great user experience, by simply adding the alt attribute to images and icons and aria-label to important elements, we can help users using screen readers or poor internet connections to navigate our website with ease.