We don’t talk enough about web accessibility even if it’s something important and essential for developers and organizations that want to create high quality websites and tools, and not exclude some people from using it because the web should work for everyone.
Why it’s important :
Everyone should be able to enjoy the web, people with disabilities will find it hard to access a website if it’s not accessible, then it's a must in order to make it easy for them to use the web.
Besides that, making a website accessible means providing a good web experience for all the users. This helps to reach more people, to get better search results and more.
Some tips to make your website accessible:
1- Avoid automatic media :
It’s annoying to have music or videos that start automatically when a page loads and I think it would be even harder for people who are using screen readers and it can be difficult for them to figure out how to turn this media off.
At least, it should be quiet and have a ‘stop’ or a ‘pause’ button.
2- Make sure your web content and navigation can be accessed using keyboard :
Accessing pages, content and links on a website must be possible using just the keyboard. some ways for testing :
-The Tab key : to navigate through links and form controls.
-Enter or Spacebar : to select an element.
-The arrow keys : for navigation.
you have to make sure that all the content can be accessed using keyboard only.
3- Add labeled form fields :
Each filed in your form should have a descriptive label element so that everyone can understand what they should enter into the form field.
Using a <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.
4- Add alt text for your images :
Adding a proper alt text for your images is so useful for users who are using screen readers, so that they can understand the message behind the image and if it contains some text you can add it in the alt attribute.
This also help the user if for some reason he cannot view it because of slow connection or an error in the src attribute.
Also giving your images descriptive text can improve your site’s SEO.
5- Use a good color scheme :
Make sure that the colors you are using on your site contrast well so that users can distinguish between all the elements on your site’s pages.
Free tools for web accessibility testing :
-Contrast checker : simple tool to calculate contrast ratios.
-Google lighthouse: This is integrated into dev tools and you can also use the extension, it gives you a full report of it’s 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.