Web Accessibility: How to Know if Your Site Meets Standards?

Today, digital accessibility is a major concern for websites. Website accessibility means enabling all users to navigate it. This concept is not limited solely to people with disabilities or visual impairments.

‍

This concept extends to people with slow internet connections, those using outdated browsers, or those with limited ability to use a navigation mouse.

Search engines also consider this topic when ranking websites.

‍

Therefore, good digital accessibility is also an important factor for achieving good organic search ranking.

This article will cover the main points related to your website's digital accessibility, along with tips for auditing it.

‍

I. Definition of Digital Accessibility

‍

Digital accessibility, or web accessibility, is the ability for all people, regardless of their disability, age, geographical location, or technical skills, to navigate websites or digital documents.

‍

This involves taking into account the needs of users with visual, auditory, motor, cognitive, or other limitations, to enable them to navigate and interact with digital content effectively and independently.

‍

The inclusivity of digital content also takes into account the user's hardware limitations.

‍

A website or document must be properly navigable even with a slow internet connection and on any type of device.

Digital accessibility thus aims to ensure equal access to information and online services for all users.

‍

II. Elements to check

‍

1. Check color contrast levels

‍

It is important to have sufficient contrasts on a website to ensure optimal readability of the content for all users. This is particularly important for people with visual impairments or altered color perception.

‍

Strong color contrast between the text and the background improves readability. If contrasts are too low, the text can become unreadable for some users.

‍

For example, white text on a yellow background can be difficult for people with visual impairments to read.

‍

To highlight white text or elements, it is therefore recommended to use darker background colors to improve readability.

‍

‍

2. Ensure font size is adjustable

‍

To make text easier to read on a website, browsers (Chrome, Firefox, Edge, etc.) offer options to change the default font size.

‍

An accessible site will therefore take user choices into account to display content accordingly. However, for this option to be effective, the site itself must be built to be adaptable.

In practice, font sizes and visual elements should be expressed in REM and not in pixels.

‍

Indeed, we are used to using a pixel value for font sizes: we would traditionally find a size of about 12 pixels on a Word document, for example.  

‍

The drawback of using pixels is that they are an absolute value. So, if text is set to 12 pixels, even if the user adjusts their display settings for a larger view, the text size will not change.

‍

In contrast, the REM unit uses the user's preferred setting as its base value. Thus, if the user changes their display settings, the text size will adjust accordingly.

‍

Using appropriate measurement units for font sizes on a website is therefore crucial to ensure and optimize its accessibility.

‍

3. Provide alternative text for images and videos

‍

To address visual impairments, the primary solution is a screen reader. These software programs "read" a website to audibly convey its content. However, it remains difficult for these tools to accurately describe images.

‍

This is why it is now crucial to add alternative text to website images. This alternative text will be read by the software instead of the image, so the goal here is to accurately describe what the image depicts.

‍

Additionally, alternative text is also displayed if an image fails to load. This method allows devices that are older or have a slower internet connection to display essential information while the image loads.

‍

Furthermore, any auditory multimedia content, such as a video or audio podcast, will require subtitles to provide full access to information for people with hearing impairments.

‍

‍

4. Keyboard-navigable website

‍

Using the keyboard to navigate a website can be faster and more efficient for some people. This includes visually impaired individuals who use screen readers to browse the web.  

‍

If the site structure is properly arranged, using the tab key allows navigation between focusable links : buttons, form fields, redirects, etc. This way, you can log into your account without using your mouse.

‍

When an element is focused, it is usually outlined in blue, which is the default browser setting. This color can be changed. It is therefore essential to define a color that contrasts sufficiently with the rest of the site to maintain readability.

‍

To ensure good understanding, it is recommended to name your links explicitly. Indeed, a screen reader will announce the text contained within a link. Thus, it is preferable to use "discover our guide on web accessibility!", because the screen reader will clearly announce the link's content.

‍

In contrast, with a poor practice like "to discover our guide on web accessibility, click here!", the user will only receive "click here" as information, which is significantly less clear.

‍

5. Mobile Best Practices

‍

For a site to be accessible, its mobile version must be as navigable and well-structured as its desktop version. To achieve this, it must be "responsive," meaning it adapts to the available screen size.

‍

On mobile, it's important to maintain a sufficiently large clickable area. For example, a button should have a minimum dimension of 48 pixels by 48 pixels.

‍

To maintain the best possible readability, it is common practice to simplify mobile navigation. Therefore, you will find dropdown menus, intuitive icons and a minimal number of navigation levels to facilitate information retrieval.

‍

Finally, it's important to ensure the font size is large enough, as reducing screen size can lead to text shrinking. It is therefore recommended to use a minimum font size of 16 pixels, or 1 REM.

‍

III. How to check if your website is accessible

‍

Google Lighthouse

‍

To audit your site's accessibility, many scoring tools are available. To ensure consistency with your natural search engine optimization, we recommend using Google Lighthouse, which scores your site's performance based on 4 criteria:

‍

• Performance

‍

• Accessibility

‍

• Best practices

‍

• SEO

The accessibility score, rated out of 100, will provide you with recommendations and display errors present on your site. This allows you to correct them to ensure smooth navigation for all users.

‍

‍

IV. Frequently Asked Questions

‍

What is digital accessibility?

‍

Digital accessibility, or web accessibility, encompasses all the rules and best practices to apply to digital content to make it understandable by all users. These rules dictate sizes, contrasts, and structures to ensure ease of use for everyone.

‍

Who is digital accessibility for?

‍

Digital accessibility affects a wide range of individuals. It takes into account visual, auditory, motor, and cognitive disabilities. Accessibility also addresses technical limitations, such as a slow internet connection or an older operating system.

‍

‍The goal of digital accessibility is to make digital content as inclusive as possible.

‍

Is my website accessible?

‍

To determine if your site is accessible, we recommend auditing it with tools like Google Lighthouse, which will reveal any errors your site may have. You will also get the necessary recommendations to correct these errors.

‍

How to create an accessible website?

‍

To create an accessible website, you need to adhere to standards regarding contrasts, font sizes, and content structure. It's also important to optimize the mobile version.

‍

To ensure a good result, we recommend using a web agency that pays close attention to accessibility. Be wary of providers who use pre-existing templates; the time saved in building the site might compromise its accessibility.