Better understand digital accessibility
Digital accessibility means making access to digital information and functionalities possible for people with disabilities. This applies to: all content, all platforms, and all functionalities.
Who is digital accessibility for?
- People with visual or hearing impairments.
- People with motor impairments.
- People with a mental disability, psychological or cognitive disorder.
- People with multiple disabilities.
A fundamental right
Accessibility is a fundamental right. It is an essential tool in the fight against discrimination, a guarantee of independence, and a means to promote inclusion in society. We all have a part to play!
A legal framework that is being reinforced
France and Italy: New laws establishing an obligation. Public services and companies exceeding certain revenue thresholds (€250M in France, €500M in Italy) must make all their digital services accessible and guarantee transparency.
Europe: The EAA mandates full accessibility for public services and certain sectors (transportation, e-commerce, etc.) under penalty of significant sanctions.
Rest of the world: Legislation such as the ADA in the United States also requires digital services to be made accessible, under penalty of legal action and heavy damages.
Recommended process for creating your accessibility page
Collaborating with your web team and accessibility experts is essential for ensuring that your accessibility page is accurate and effective. Working together helps create a more inclusive digital experience for all users.
Please find below the recommended process for implementation:
- Download and review the appropriate template (English or French version).
- Review the provided video tutorial and written guide for step-by-step instructions.
- Customize the content to match your website's context and verify accuracy with your team.
- Publish the accessibility page and implement it in your website's footer menu.
English accessibility page template
Modèle de page d'accessibilité en français
Go to Content, then Add content, and select Page.
Enter a title and complete the hero banner with your introductory sentence.
Create a container and choose the Text component. Paste the template inside the text field. Remove the style by clicking the Tx icon. Adjust the text spacing, replace the highlighted yellow info with your site name, contact form, and reply time. Make sure the URLs in the text are properly linked and clickable.
Finally, publish the page.
First, go to Structure, then Menu, and Footer.
Click on Add link.
Enter the menu title and paste the link using the correct node to redirect to your page. Click Save.
Make sure to check the "Enabled" box so the menu appears in the footer. Click Save again to confirm.
Finally, scroll down to the bottom of your landing page to check that the menu link is now visible in the footer.
Checklist and best practices
Today, 67.7% of screen reader users navigate from heading to heading to browse a webpage.
- ✅ DO: Use a logical and consistent heading hierarchy (H1 to H6) that forms a "table of contents". Manage spacing and structure quotes using your text editor's built-in features. Avoid unmarked language changes, except for integrated foreign words (e.g., newsletter).
- ❌ DON'T: Never skip heading levels (e.g., jumping directly from an H2 to an H4). Do not use heading levels simply to make text larger. Do not use multiple line breaks (empty paragraphs) to force visual spacing.
- 🛠️ TOOLS: Install the HeadingsMap browser extension (highlights heading errors in red) and the Ideance Bookmarklets (to spot multiple line breaks and empty tags).
👉 Outil HeadingsMap
👉 Bookmarklets Ideance "Retour à la ligne consécutif" et “Balises vides”
The text alternative is read by screen readers to convey information to people who are blind or visually impaired.
- ✅ DO (Decorative images): The text alternative must remain empty. In Drupal, you must check the "Decorative image" box so that this information is ignored by screen readers.
- ✅ DO (Informative images): Provide a text alternative that objectively describes the image in a single sentence.
- ✅ DO (Complex images): When an image (e.g., a diagram) conveys a lot of information, include "(see detailed description below)" in the text alternative. Then, add an "Accordion" component (collapsible panel) below the image containing the detailed text.
❌ DON'T: The text alternative must NEVER contain a string of keywords for SEO, the image file name, copyright information, or the exact same text as the title of the adjacent content.
- ✅ DO (Lists): Use numbered lists only if the order is actually important (e.g., a recipe). Use bulleted lists if the order does not matter. Use "Shift + Enter" to add spacing between items.
- ❌ DON'T (Lists): Manually add a dash or a number at the beginning of each line.
- ✅ DO (Tables): Indicate the position of the headers (1st column and/or 1st row) using your editor; they will then appear with a gray background.
- ✅ DO (Links): Link labels must be explicit. Select the entire phrase that describes the action (rather than just the word "here"). Visually differentiate links in the text by adding a distinctive element, such as an underline.
- ❌ DON'T (Links): Labels like "Find out more", "Read more", or "Click here".
- ✅ DO: Every video must have synchronized, punctuated, and sufficiently contrasted captions (or subtitles).
- ✅ DO: If you use auto-generated captions (YouTube or Lumapps), manually correct transcription errors and punctuation.
- ✅ DO: All video and audio content must have a text transcript. Place it directly below the video in a collapsible section (Accordion).
- 🛠️ TOOLS: Use the COMM-AI video Transcription tool.
To ensure your content is readable by visually impaired and color-blind individuals, you must use color combinations with sufficient contrast.
- Golden rule: It is necessary to achieve a minimum contrast ratio of 4.5:1 (WCAG AA Standard).
- Scope: This applies to all web text, documents (PDF, Word, etc.), emails, captions/subtitles, and especially text embedded within an image. (Exceptions: logos, labels, and decorative icons).
- 🛠️ TOOLS: Use the online tool app.contrast-finder.org to check your ratios, install the "Contrast Checker" Bookmarklet, and discover the "EditoriA11y" plugin (coming soon to Drupal).
👉 Test on app.contrast-finder.org
👉 Install the Contrast Checker Bookmarklet
👉 Discover the EditoriA11y plugin (coming soon)
WCAG AA-Compliant Color Combinations
This list displays only color combinations that meet WCAG AA requirements for normal text.
The minimum required contrast ratio is 4.5:1. The background color is shown on the left, and the text or icon color is shown on the right.
Use it to quickly verify contrast ratios (like WCAG AA) and guarantee your content is readable for all users, including those with visual impairments.
All combinations
Select a background color from the menu to start.
Handy accessibility tips
Text-to-Speech Accessibility Guide
Text-to-Speech (TTS) is a built-in accessibility feature that reads digital text aloud. It ensures that everyone, including users with visual impairments or reading difficulties, can access our online content without barriers. Select your operating system below to find step-by-step instructions on how to enable and use these native audio reading tools.
Enable Narrator on Windows
Narrator reads aloud the text on your screen and describes events, such as notifications or appointments.
- Open Settings (keyboard shortcut:
Windows + i). - In the left menu, select Accessibility.
- Under the "Vision" section, click on Narrator.
- Turn on the Narrator toggle switch.
💡 Tip: The keyboard shortcut Windows + Ctrl + Enter lets you turn Narrator on or off at any time.
Enable "Spoken Content" on Mac
macOS offers a targeted feature that only reads the text you select.
- Click the Apple menu in the top left corner, then choose System Settings.
- In the left sidebar, click on Accessibility.
- Under the "Vision" section, click on Spoken Content.
- Turn on the Speak selection toggle switch.
💡 Tip: Highlight any text and press Option + Esc to start the voice reading.
Enable "Select-to-speak" on Chromebook
ChromeOS has a similar tool that reads a specific text area aloud.
- Click the time in the bottom right corner of your screen, then click the Settings icon (the gear).
- In the left menu, select Accessibility.
- Click on Manage accessibility features.
- Under the "Text-to-Speech" section, turn on the Select-to-speak option.
💡 Tip: To use it, press and hold the Search key and click a line of text, or drag your pointer over an area of the screen.
