${color.name}`; li.addEventListener('click', () => { tool.querySelectorAll('.v-color-item').forEach(el => el.classList.remove('selected')); li.classList.add('selected'); tool.querySelectorAll('#contextFilters .v-nav-btn').forEach(b => b.classList.remove('active')); state.activeBg = color.hex.toUpperCase(); renderResults(); }); list.appendChild(li); }); header.addEventListener('click', () => { list.classList.toggle('open'); header.querySelector('.material-icons-outlined').textContent = list.classList.contains('open') ? 'expand_less' : 'expand_more'; }); // Default Open for Blue & Greyscales if(cat.id === 'blues' || cat.id === 'greyscales') list.classList.add('open'); group.appendChild(header); group.appendChild(list); containerAccordion.appendChild(group); }); } function attachListeners() { // Context Filters (All, Light backgrounds, Dark backgrounds) tool.querySelectorAll('#contextFilters .v-nav-btn').forEach(btn => { btn.addEventListener('click', (e) => { tool.querySelectorAll('#contextFilters .v-nav-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); tool.querySelectorAll('.v-color-item').forEach(el => el.classList.remove('selected')); state.activeBg = null; state.contextFilter = btn.dataset.filter; renderResults(); }); }); // Search Input searchInput.addEventListener('input', (e) => { state.searchQuery = e.target.value.toLowerCase().trim(); renderResults(); }); // View Switcher tool.querySelectorAll('.v-icon-btn[data-view]').forEach(btn => { btn.addEventListener('click', () => { tool.querySelectorAll('.v-icon-btn[data-view]').forEach(b => b.classList.remove('active')); btn.classList.add('active'); const view = btn.dataset.view; tool.querySelector('#viewGrid').style.display = view === 'grid' ? 'grid' : 'none'; tool.querySelector('#viewTable').style.display = view === 'table' ? 'block' : 'none'; }); }); // Theme Toggle if(themeToggleBtn) { themeToggleBtn.addEventListener('click', () => { if (tool.getAttribute('data-theme') === 'dark') { tool.removeAttribute('data-theme'); } else { tool.setAttribute('data-theme', 'dark'); } }); } } function renderResults() { let validPairs = []; // Determine target backgrounds let bgsToProcess = allColorsHex; if (state.activeBg) { bgsToProcess = [state.activeBg]; resultsTitle.textContent = `Background: ${allColorsObj[state.activeBg]} (${state.activeBg})`; resultsMeta.textContent = `Text colors compatible with this background.`; } else { if (state.contextFilter === 'light') { bgsToProcess = allColorsHex.filter(hex => isLight(hex)); resultsTitle.textContent = `Light Backgrounds`; } else if (state.contextFilter === 'dark') { bgsToProcess = allColorsHex.filter(hex => !isLight(hex)); resultsTitle.textContent = `Dark Backgrounds`; } else { resultsTitle.textContent = `All combinations`; } resultsMeta.textContent = `Explore text colors depending on background.`; } // Process combinations bgsToProcess.forEach(bg => { allColorsHex.forEach(fg => { const ratio = contrastRatio(bg, fg); if (ratio >= CONTRAST_THRESHOLD_AA) { const fgName = allColorsObj[fg]; const bgName = allColorsObj[bg]; if (state.searchQuery === '' || fg.toLowerCase().includes(state.searchQuery) || fgName.toLowerCase().includes(state.searchQuery) || bg.toLowerCase().includes(state.searchQuery) || bgName.toLowerCase().includes(state.searchQuery)) { validPairs.push({ bg, fg, ratio, fgName, bgName }); } } }); }); // Sort Descending validPairs.sort((a, b) => { if (a.bg === b.bg) return b.ratio - a.ratio; return b.ratio - a.ratio; }); // Update Counter resultsCount.textContent = `${validPairs.length} combination(s) found`; // Render Grid & Table gridEl.innerHTML = ''; tableBodyEl.innerHTML = ''; if (validPairs.length === 0) { gridEl.innerHTML = `No color meets the criteria.
`; tableBodyEl.innerHTML = `| No results |
|---|
`; return; } validPairs.forEach(pair => { const isAAA = pair.ratio >= 7.0; // GRID ITEM const card = document.createElement('div'); card.className = 'v-card'; card.innerHTML = ` ${isAAA ? 'WCAG AAA' : 'WCAG AA'}Example Text
Normal readability
${state.activeBg ? 'Text color' : 'Bg: ' + pair.bgName + ' | Text'}
${pair.fgName}
${pair.fg}
${pair.ratio.toFixed(2)}
`; gridEl.appendChild(card); // TABLE ROW const tr = document.createElement('tr'); tr.innerHTML = ` | ${pair.fgName} ${pair.fg} | Visual Preview | ${pair.ratio.toFixed(2)}:1 | check\_circle Compliant `; tableBodyEl.appendChild(tr); }); } buildSidebar(); attachListeners(); renderResults(); } function init(context) { const scope = context || document; scope.querySelectorAll('[data-v-wcag-tool]').forEach(tool => initializeTool(tool)); } if (typeof Drupal !== 'undefined' && Drupal.behaviors) { Drupal.behaviors.vWcagTool = { attach: function (context) { init(context); } }; } else { document.addEventListener('DOMContentLoaded', () => init(document)); } })();
##
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.
.veo-tabs-nav {
display: flex;
border-bottom: 2px solid #E5E5E5;
margin-bottom: 2rem;
margin-top: 2rem;
gap: 0.5rem;
flex-wrap: wrap;
}
.veo-tab-btn {
background: transparent;
border: none;
border-bottom: 4px solid transparent;
padding: 0.75rem 1.5rem;
font-family: inherit;
font-size: 1.125rem;
font-weight: 700;
color: #4C4C4C;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.veo-tab-btn:hover {
color: #00613B;
background-color: #F2F2F2;
}
.veo-tab-btn.active {
color: #00613B;
border-bottom-color: #00613B;
}
.veo-tab-content {
display: none;
animation: fadeVeo 0.4s ease;
}
.veo-tab-content.active {
display: block;
}
.veo-tip-box {
background-color: #F2F1F9;
border-left: 4px solid #00613B;
padding: 1.5rem;
margin-top: 1.5rem;
border-radius: 0 4px 4px 0;
}
.veo-tip-box p {
margin: 0 !important;
}
@keyframes fadeVeo {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
Windows Mac Chromebook
### Enable Narrator on Windows
Narrator reads aloud the text on your screen and describes events, such as notifications or appointments.
1. Open **Settings** (keyboard shortcut: `Windows + i`).
2. In the left menu, select **Accessibility**.
3. Under the "Vision" section, click on **Narrator**.
4. 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.
1. Click the **Apple menu** in the top left corner, then choose **System Settings**.
2. In the left sidebar, click on **Accessibility**.
3. Under the "Vision" section, click on **Spoken Content**.
4. 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.
1. Click the time in the bottom right corner of your screen, then click the **Settings** icon (the gear).
2. In the left menu, select **Accessibility**.
3. Click on **Manage accessibility features**.
4. 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.
function openVeoTab(evt, osName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("veo-tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].classList.remove("active");
}
tablinks = document.getElementsByClassName("veo-tab-btn");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
document.getElementById(osName).classList.add("active");
evt.currentTarget.classList.add("active");
}
## Explore more configuration options
[  ](/site-configuration/basic-site-settings)[Basic settings ](/site-configuration/basic-site-settings)
### [Basic settings ](/site-configuration/basic-site-settings)
[  ](/site-configuration/navigation)[Navigation settings ](/site-configuration/navigation)
### [Navigation settings ](/site-configuration/navigation)
[  ](/site-configuration/sticky-bar)[Sticky bar](/site-configuration/sticky-bar)
### [Sticky bar](/site-configuration/sticky-bar)
[  ](/site-configuration/taxonomy)[Taxonomy](/site-configuration/taxonomy)
### [Taxonomy](/site-configuration/taxonomy)
Previous Next
/* CSS reset & variables */
.veo-sticky-toc {
position: fixed;
top: 50%;
left: 0;
/* Le panneau est caché, seule la poignée dépasse de 30px */
transform: translateY(-50%) translateX(calc(-100% + 30px));
z-index: 99999; /* Toujours au-dessus */
background: #ffffff;
box-shadow: 4px 0 15px rgba(0,0,0,0.1);
border-radius: 0 8px 8px 0;
display: flex;
font-family: 'Noto Sans', sans-serif !important;
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Ouverture au survol */
.veo-sticky-toc:hover {
transform: translateY(-50%) translateX(0);
}
/* === La poignée (Handle) === */
.veo-toc-handle {
width: 30px;
background: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 8px 8px 0;
cursor: pointer;
border-left: 1px solid #e5e5e5;
}
.veo-toc-handle span {
color: #e2001a;
font-weight: bold;
font-size: 1.2rem;
transition: transform 0.3s;
}
/* La flèche se retourne quand le menu est ouvert */
.veo-sticky-toc:hover .veo-toc-handle span {
transform: scaleX(-1);
}
/* === Contenu du menu === */
.veo-toc-content {
padding: 2rem 0;
min-width: 380px;
}
.veo-toc-header {
font-size: 0.85rem;
color: #55555A;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 1.5rem;
padding-left: 2.5rem;
}
.veo-toc-list {
list-style: none;
padding: 0;
margin: 0;
}
/* === Les liens inactifs === */
.veo-toc-link {
display: flex;
align-items: center;
text-decoration: none;
color: #333333;
padding: 12px 1rem 12px 2.5rem; /* Marge gauche pour décoller le liseré rouge */
font-size: 0.95rem;
background: transparent;
position: relative;
cursor: pointer;
transition: background-color 0.2s ease;
}
.veo-toc-link:hover {
background-color: #f9f9f9;
}
/* Le liseré transparent par défaut */
.veo-toc-link::before {
content: '';
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
height: 60%; /* Plus petit que l'onglet, comme sur votre maquette */
width: 2px;
background-color: transparent;
transition: background-color 0.2s;
}
/* === État Actif (Texte et Liseré rouges) === */
.veo-toc-link.active {
color: #e2001a;
}
.veo-toc-link.active::before {
background-color: #e2001a;
}
Sommaire
-
Recommended process for creating your accessibility page
-
Checklist and best practices
-
WCAG AA-Compliant Color Combinations
-
Handy accessibility tips
>
document.addEventListener('DOMContentLoaded', function() {
const links = document.querySelectorAll('.veo-toc-link');
links.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault(); // Empêche le comportement brutal par défaut
// 1. Récupérer le texte cible et chercher le H2 correspondant
const targetText = this.getAttribute('data-target').toLowerCase().trim();
const allH2s = document.querySelectorAll('h2');
let targetH2 = null;
for (let i = 0; i < allH2s.length; i++) {
if (allH2s[i].textContent.toLowerCase().includes(targetText)) {
targetH2 = allH2s[i];
break;
}
}
if (targetH2) {
// 2. Mettre à jour l'état visuel actif (rouge)
links.forEach(l => l.classList.remove('active'));
this.classList.add('active');
// 3. Calculer la position pour un défilement fluide
const headerOffset = 100; // Espace pour ne pas cacher le titre sous le menu fixe du haut
const elementPosition = targetH2.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
// 4. Défilement natif fluide
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
} else {
console.error('Section H2 introuvable pour ce lien : ' + targetText);
}
});
});
});