Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
javascript
community creator
web development
accessibility

Tips and free tools to make your website accessible

Nadia Laasri

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.

Why it’s important

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.

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, 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 pause button.

2- Make sure your website content and navigation can be accessed using keyboard

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.

3- Add labeled form fields

Each file 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 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 alt attribute.

This also helps the users who are facing slow internet connection or an error in the src attribute.

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 website contrast well so that users can distinguish 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 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.

RELATED TAGS

css
javascript
community creator
web development
accessibility
RELATED COURSES

View all Courses

Keep Exploring