Usability and WCAG 2.1 AA accessibility for AiScan modal UI. ARIA attributes, keyboard navigation, focus management, color contrast, screen reader support, form validation feedback.
WCAG 2.1 Level AA — all new and modified UI must meet this baseline.
The AiScan scanning modal is the primary UI surface. Requirements:
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="aiscan-modal-title">
<h5 id="aiscan-modal-title">Escanear Factura</h5>
...
</div>
tabindex="-1" on non-interactive containers that receive programmatic focus| Key | Action |
|---|---|
Escape | Close modal |
Enter | Activate primary action button |
Tab / Shift+Tab | Navigate between interactive elements |
| Arrow keys | Navigate within radio groups, select menus |
aria-current="step"aria-live="polite" regionaria-disabled="true" + tabindex="-1"AI analysis takes seconds — user must know what's happening:
<div aria-live="polite" aria-atomic="true" class="aiscan-status">
Analizando documento... <!-- screen readers announce changes -->
</div>
aria-live="polite" for non-urgent updates (analysis progress)aria-live="assertive" for errors onlyExtracted data includes confidence scores. Display rules:
<input>, <select>, <textarea> must have an associated <label>for="id" attribute — not wrapping <label> (FS convention)<input id="invoice-number" aria-describedby="invoice-number-error" aria-invalid="true">
<div id="invoice-number-error" class="text-danger" role="alert">
Numero de factura requerido
</div>
aria-describedbyaria-invalid="true" on invalid fieldsrole="button" with tabindex="0" and keydown handler for Enter/Spaceaccept attributeThe modal uses a 55/45 split (preview left, data right):
role="separator", arrow keys resize)<table class="table" aria-label="Lineas de factura">
<thead>
<tr><th scope="col">Descripcion</th><th scope="col">Cantidad</th>...</tr>
</thead>
...
</table>
<th scope="col"> for column headers<input> inside <td>, each with label (visible or aria-label)Assets/JS/aiscan.js — UI event handling and DOM manipulationAssets/CSS/aiscan.css — Modal, split-pane, and form styling