Most - if not all - modern websites have accessibility, which is an important thing to implement because it makes your website accessible to users that have disabilities, and reach a wider audience of users that use assistive technologies.
In implementing accessibility, you are giving everyone access to information that they need, or interactions with others using the internet, no matter what their conditions or disabilities are. Web accessibility is even required by law in some cases, so it’s always a good idea to keep accessibility in mind when you’re making a web app. In this post I’ll be talking about the following:
- What are some of the guidelines for accessibility?
- What tools are out there to check how accessible my app is?
- How do we implement them in our own web apps?
Guidelines for Accessibility
First and foremost, make sure that all the content on your page is clear and concise, so a user doesn’t get confused with what your content is about. This also ensures that you’re not leaving a user out if they can’t understand what perhaps another user would, like metaphors or figures of speech. Another thing that would greatly be of use is using Semantic HTML, which already provides a lot more accessibility than HTML that is not semantic.
Overall, a general guideline for accessibility is to always keep in mind how the user will be using your web app. Provide descriptions of elements and images on the page, make sure that the user is able to control what they want on the page (media, zooming in or out, etc), allow users to focus on an element with their keyboard (known as keyboard focusing), and provide clear validations as well as explanations of what is happening with your web app (successfully doing something, the user requiring another input, any errors, etc). This will allow the user to understand your web app as they explore
What Tools Can I Use To Check Accessibility in My Web App?
There are plenty of tools to get you on your way to making your web app accessible, but the easiest to use is Google Lighthouse, which is in your DevTools if you’re using Google Chrome. Simply click the ‘Generate Report’ button, and let Lighthouse do its thing. You’ll get back scores of how your web app performs, and one of the categories is accessibility. Looking into why you get a certain score and seeing what needs to be improved on is sure to aid you in making sure that your accessibility score is as high as can be.
For more specific aspects of accessibility, there are lots of Chrome extensions and websites that aid with how accessible your app is. Here are a few that are worth checking out:
Accessibility.dev - This site was created by Level Access, a company that is focused on providing accessibility to products and services. The site provides tools such as color contrast checking, accessibility testing, and even a tool to help developers write clean and readable code!
Accessible Color Palettes - This tool can help you choose a color palette that will allow for users to read the text in your app, especially if you’re using lots of colors or have a theme to go along with your app.
Colorblind Checker - This site can be useful for testing if your web app is accessible to users that are colorblind, and will show you how your web page will look depending on the condition.
Accessibility Evaluation Tool - This tool allows you to paste a web page URL, and it will evaluate how accessible your app is. It can even give you an explanation for the things that they’re looking for, and why they’re important. Overall, a handy tool if you’re looking to see what your web app has and what it can improve on.
How Do We Implement Accessibility In Our Apps?
Other than Semantic HTML and overall clarity, you’ll likely come across Accessible Rich Internet Applications (ARIA), a standard for accessibility in web apps. HTML tags have attributes that start with aria, and have a bunch of accessibility features, such as aria-label, which labels an element for screen-readers to see. Here's an example of what that might look like:
<button role="button" aria-label="Greeting">Hello!
</button>
There’s also a role attribute that describes the element’s purpose, such as a checkbox or a button. You can use ARIA for non-semantic elements, as HTML5 has incorporated accessibility in Semantic HTML for most elements.
If you’re using React, they support accessibility by using HTML standards, like ARIA or Semantic HTML. They use Ref’s to keep accessibility running smoothly, since having a virtual DOM that updates the actual DOM can lead to some problems, especially with keyboard focusing. React also has a Fragment component, which allows a component to return multiple elements without having to encompass them in a <div> tag or something similar, which can disrupt the overall semantic flow of your web app. There are plenty of npm packages to aid in accessibility for React, and even with applications that don’t use React as well, so it’s worth checking some out!
Web apps should be accessible to everyone, so keeping accessibility in mind should be one of the priorities you have when building a web app of your own. There are lots of resources out there to help make your app as accessible as possible, and looking into guidelines like the one provided at The A11y Project’s website would be a good place to learn what to keep an eye out for! Happy building!
Top comments (0)