Accessibility considerations

Why is accessibility important?

The accessibility of a website is not only important for the search engine to better understand the content of the page, but also for people with disabilities to be able to use the website. This is especially important for people with visual impairments, who rely on screen readers to navigate the web. The accessibility of a website can also help people with cognitive disabilities, such as dyslexia, to better understand the content.

Accessibility also includes supporting input methods other than a mouse and keyboard, such as touchscreens, voice recognition, and keyboard-only navigation.

Rendering a website accessible can be a complex task, beyond the semantics of HTML, one need to take into account and communicate important visual changes in the content and layout.

Making a website accessible

While creating a fully accessible website is beyond the scope of this module, we recommend having a look at the W3C Accessibility Fundamentals and the Page Structure tutorials. They both provide a good overview of the different aspects of accessibility.

Both the Chrome DevTools and Firefox Developer Tools include an overview of how your website's structure will be perceived by screen readers.

For this module, we encourage you to try and keep the following things in mind:

• Semantic HTML: Use semantic HTML to structure your content. This will help search engines understand the content of your page, and also make it easier for people with disabilities to navigate your website. This includes using the <nav>, <header>, <main>, and <footer> tags.
• Images: Use alt text to describe the content of the image. This will help people with visual impairments to understand the content of the image.
• Text size: Use a readable font size. Start with at least 16px (1rem) as your base font size, as smaller sizes can be difficult for people with visual impairments to read.
• Text contrast: Use a readable contrast between text and background. Avoid using low contrast, as this can be difficult for people with visual impairments to read.
• Headings: Use headings to structure your content and make it easier for people with cognitive disabilities to navigate your website.
• Links: Use descriptive link text to help people with cognitive disabilities understand the purpose of the link.
• Touch targets: A touch is less precise than a click. Every interactive element should have a minimum width and height of 24px. Some accessibility guidelines recommend taking it further by using a minimum of 44px.