Introduction
In this post, I'll talk about common accessibility mistakes found by WebAIM and share ways to fix them.
🎨 Low Contrast Text
One common mistake is using text with low contrast because it makes it difficult to read, especially for people who are color blind or with low vision.
For readable text, we should aim to use colors with a contrast ratio of 4.5:1.
You can use the WebAIM Contrast Checker to check if your colors have enough contrast.
🖼️ Images and Alternative Text
Images without descriptive alternative text are a problem for people who use screen readers.
Without alternative text, screen readers may not describe the image correctly, causing confusion or incomplete understanding.
We should always provide descriptive alternative text for images, like this:
<img src="image.jpg" alt="An artist painting a colorful sunset">
🔗 Empty Links
Empty links, such as "Click Here" or "Read More," can be confusing for people who use special tools to browse the web.
To make it easier, use words that clearly describe where the link will take you, like this:
<a href="menu.html">Read more about our Menu</a>
If you put an image inside a link or a button, the text you write in the alt attribute becomes the name of the link.
When someone clicks or focuses on the link, alt will be read out loud.
<a href="https://www.instagram.com/mirayatech">
<img src="instagram.png" alt="mirayatech Instagram profile" />
</a>
🏷️ Form Labeling
It's important to label each input field so that people understand what to fill in.
Using the <label> element and connecting it to the input field using the for attribute, like this:
<label for="name">Name:</label>
<input type="text" id="name" name="name">
To connect the label to the right input field, the for attribute in the <label> tag should match the id attribute in the <input> tag.
This way, the label, and the input field work together properly.
🔘 Fixing Empty Buttons
Make sure buttons have a name that tells what they do.
If you have an image inside of a button, you can add a description to an image using the alt attribute, like this:
<button type="submit">
<img src="/search.svg" alt="Search"/>
</button>
🧧 aria-label
By also adding an aria-label attribute, which directly gives the button an accessible name.
<button type="submit" aria-label="Search">
<FiSearch width={20} height={20} />
</button>
🎏 aria-labelledby
You can also use the aria-labelledby attribute, which is used not to set the accessible name directly on the element, but to label the element by something else.
<button aria-labelledby="searchText">
<FiSearch width={20} height={20} />
</button>
<span id="searchText" class="sr-only">Search</span>
🔤 Headings (levels)
Using heading in the right order is always important, so it doesn't confuse people who use screen readers.
Start with the main heading <h1>, and then use the lower-level headings like <h2>, <h3>, and so on, like this:
<h1>Main Heading</h1>
<h2>Subheading</h2>
Screen readers automatically focus on the highest-level heading, so it's important to keep the headings in the right order because this helps them understand the structure of the content on the page.
🧶 Missing document language
Sometimes, websites forget to mention the language they are written in. This can make it difficult for screen readers to understand them.
To fix it, add this simple line of code, like this:
<html lang="en">
...
</html>
Here we used lang="en" to indicate that the page is in English.
By adding the document language, we help screen readers pronounce words correctly.
It's a small but important step to make our website easier for everyone to use.
Wrap up
I hope you found this post helpful in understanding common accessibility mistakes and how to fix them.
By addressing these issues, we can make our apps more accessible to everyone, including people with disabilities.