Even though web accessibility is something important and essential for developers and organizations who want to create high-quality websites and tools that don’t exclude certain people from using it, we don’t talk about web accessibility enough.
Everyone should be able to enjoy your website, but people with disabilities may find it hard to access a website if it’s not accessible. So, it must be a priority to make it easy for everyone to use your website.
Besides that, making a website accessible means providing a good user experience to all the users. This helps to reach more people, get better search results, and more.
It’s annoying to have music or videos that start automatically when a page loads, but it’s even harder for people who are using screen readers because it can be difficult for them to figure out how to turn the media off.
The media should at least be quiet and have a
stop or a
Accessing pages, content, and links on a website is sometimes impossible if you’re only using the keyboard.
To test this, make sure that all the content can be accessed using keyboard only. Some ways to test this:
The Tab key: to navigate through links and form controls.
Enter or Spacebar: to select an element.
The arrow keys: for navigation.
Each file in your form should have a descriptive label element so that everyone can understand what they should enter into the form field.
<label> HTML tag is very important. For example, if it’s a field for the username, the label element should say “First name” or “Full name”.
If the field is required, you can add
required="false" to tell the users that they can’t leave it blank.
alttext for your images
Adding a proper
alt text for your images is very useful for users who are using screen readers. It allows them to understand the message behind the image, and if it contains some text, you can add it in the
This also helps the users who are facing slow internet connection or an error in the
Giving your images descriptive text can improve your site’s SEO.
Make sure that the colors you are using on your website contrast well so that users can distinguish all the elements on your site’s pages.
Contrast checker: Simple tool to calculate contrast ratios.
Google lighthouse: This is integrated into DevTools and you can also use its extension. It gives you a full report of its test results.
Axe: An extension that gives you a whole list of “violations” detected on your page.
WAVE: Chrome extension to evaluate your website accessibility.
SEO Site Checkup: Check for image alt text.
Check My Links: Chrome extension to check for empty links.
View all Courses