Accessibility as an engineering requirement

Cookie modal becomes a <dialog> native

Problem

The modal was announced as modal (aria-modal), but did not take the focus inside, did not contain it and did not return it when closing.

Change

The native element <dialog> with showModal(): the browser moves the focus, leaves the rest of the page inert and closes with Esc. Of the 11 new tests, 10 failed the old code.

Criteria

WCAG 2.4.3 Focus order, 2.1.2 No keyboard lock, 4.1.2 Name, function, value.

Evidence

commit a1fe89f, src/js/cookie-consent.js

-    const backdrop = document.createElement('div');
-    backdrop.className = 'cc-modal-backdrop';
-    backdrop.setAttribute('role', 'dialog');
-    backdrop.setAttribute('aria-modal', 'true');
+    const dialog = document.createElement('dialog');
+    dialog.className = 'cc-dialog';
+    dialog.setAttribute('aria-labelledby', 'cc-modal-title');
…
+        dialog.showModal();
+        dialog.querySelector('#cc-modal-title').focus(); // o leitor de tela lê "diálogo" + o título

Jump Link and <main> on every page

Problem

Only 16 out of 41 pages had a link to skip navigation, and 14 pages did not mark the main region with the element <main>. Without this link, those who use keyboards go through all navigation before reaching the content.

Change

Jump to content as the first focusable element, with the main region as target. The first version of the link had white background; the verifier of the site itself, which prohibits clear background (visual rule of the house, not accessibility), failed, and the link passed to the dark theme.

Criteria

WCAG 2.4.1 Ignore blocks, 1.3.1 Information and relationships.

Evidence

commit 3bb4900, src/404.html · Dark theme in commit f09b042

-    <div>
+    <a class="a11y-skip" href="#conteudo">Pular para o conteúdo</a>
+    <main id="conteudo">
         <h1>404</h1>
…
-    </div>
+    </main>

Contrast resolved in color palette, not page by page

Problem

The supporting text in gray-500 gave from 3.15:1 to 4.16:1 on the background of the site, below the minimum of 4.5:1. The blue #007bff was used as a text color.

Change

One color for each function. Support text: #99a1af, 7.27:1 on the background color #0d1117. Blue text: #58a6ff, 7.49:1. The color #007bff was restricted to backgrounds, edges and icons. About 128 disapproved passages fell to 2, on an exception page.

Criteria

WCAG 1.4.3 Contrast (minimum).

Evidence

commit 90e6e8e, src/catalogo.html and src/curriculo.html · rule in A11Y-DECISIONS.md

-    <footer class="bg-gray-950 text-gray-500 py-12 text-center text-sm border-t border-white/5">
+    <footer class="bg-gray-950 text-gray-400 py-12 text-center text-sm border-t border-white/5">
…
-            color: #007bff;
+            color: #58a6ff;

Grids that fit at 320 px

Problem

At 320 px wide (the equivalent of 400% zoom on a 1280 px screen), 14 pages required horizontal scrolling. The common cause: grid with minimum width larger than the screen.

Change

The minimum column becomes the lowest between 100% and the original value. The same pattern was applied to other grids. In the other pages the causes were other: grid items without minimum width zero, code blocks and wide tables, and a tooltip. The pattern already existed in index.css.

Criteria

WCAG 1.4.10 Reflow.

Evidence

commit ba640d7, src/case-agents.css

-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));

Focus ring visible on all pages

Problem

In dark background, Chrome's standard focus ring came out almost black, rgb(16,16,16). Those who navigate by keyboard could not see where it was.

Change

A Vite plugin injects a blue ring of 2 px on every page. The selector :where() It has zero specificity, so the style of each page itself remains valid. In the v2 audit the same plugin started to reserve space at the top, so the focus did not stay under fixed headers.

Criteria

WCAG 2.4.7 Visible focus; 2.4.11 Focus not obscured.

Evidence

commit cb060c6 and commit 37f22b7, vite.config.js

+const focusBase = () => ({
+  name: 'a11y-focus-base',
+  transformIndexHtml: () => [
…
+        ':where(a[href],button,summary,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid #58a6ff;outline-offset:2px}' +
+        'summary:focus-visible{outline-offset:-4px}',

The accessible name starts with the visible text

Problem

Links with aria-label different from the text on the screen. Those who use voice control speak what they see, and the command does not find the element.

Change

The accessible name becomes the visible text; the new tab notice goes in visually hidden text, which enters the accessible name. A new test checks all the pages, because Axe comes with this rule off.

Criteria

WCAG 2.5.3 Label in name.

Evidence

commit 6f6d01c, scripts/gen-portfolio.mjs (the home page generator)

-${alura ? `<p class="pf-alura-all"><a href="${esc(alura.Verificacao)}" ${ext('Certificado geral Alura')}>Ver certificado geral Alura</a></p>` : ''}`;
+${alura ? `<p class="pf-alura-all"><a href="${esc(alura.Verificacao)}" target="_blank" rel="noopener noreferrer">Ver certificado geral Alura<span class="pf-sr"> (abre em nova aba)</span></a></p>` : ''}`;

Before, ext() injection aria-label="… (abre em nova aba)", which replaced the visible text in the link name.

A drag exercise gains path by keyboard

Problem

In Chapter 3 of the OCC simulator, the fraction was only mounted with the mouse by dragging or clicking. The blocks were focused, but Enter and Espaço did nothing, and the destination zones were not even focused. Without completing this exercise, chapters 4 to 6 were not released.

Change

The path "select and place": block and destination zone respond to Enter and Space, and the chosen block announces the state with aria-pressed. The two continue to be div with role=button, because Firefox does not drag a native button marked as dragable.

Criteria

WCAG 2.1.1 Keyboard.

Evidence

commit 37f22b7, src/js/operacao-capital-cognitivo/chapters.js

+  const asButton = (node, activate) => {
+    node.setAttribute('role', 'button'); node.tabIndex = 0;
+    node.addEventListener('click', activate);
+    node.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); activate(); } });
…
-    chip.textContent = b.label; chip.tabIndex = 0; chip.dataset.concept = b.c; chip.draggable = true;
+    chip.textContent = b.label; chip.dataset.concept = b.c; chip.draggable = true;
+    chip.setAttribute('aria-pressed', 'false');