Cosa significa davvero il livello AA
WCAG è organizzato in tre livelli. A è il minimo, AA è il livello da cui partono gli appalti pubblici europei ed EN 301 549, e AAA è un obiettivo che nessuno è tenuto a raggiungere su un intero sito. Quando una gara d’appalto chiede « WCAG 2.2 AA », intende ogni criterio di successo A e AA, su ogni pagina nell’ambito, in ogni stato che un utente può raggiungere.
I criteri di successo sono affermazioni verificabili, non tecniche. « Contrasto (minimo) » non ti dice quale token cambiare; ti dice il rapporto misurato che un testo deve superare. Questa distinzione conta in un audit: un riscontro è difendibile quando nomina il criterio, l’elemento e la misurazione, non quando nomina uno strumento.
Un sito non passa o fallisce nel suo insieme. La conformità si dichiara per pagina, e un solo elemento non conforme su una pagina rimuove la dichiarazione per quella pagina. Ecco perché il monitoraggio continuo batte un audit una tantum: un aggiornamento del tema può annullare la dichiarazione di cento pagine in una volta.
I nove criteri aggiunti da WCAG 2.2
Sei di essi sono in A o AA, quindi rientrano nell’ambito di una valutazione EN 301 549. L’ultima colonna dice se uno scanner può giudicarlo o se deve farlo una persona.
| CS | Nome | Livello | Come viene testato |
|---|---|---|---|
| 2.4.11 | Focus non oscurato (minimo) | AA | manuale |
| 2.4.12 | Focus non oscurato (avanzato) | AAA | manuale |
| 2.4.13 | Aspetto del focus | AAA | manuale |
| 2.5.7 | Movimenti di trascinamento | AA | manuale |
| 2.5.8 | Dimensione del bersaglio (minimo) | AA | automatico |
| 3.2.6 | Aiuto coerente | A | manuale |
| 3.3.7 | Inserimento ridondante | A | manuale |
| 3.3.8 | Autenticazione accessibile (minimo) | AA | parzialmente automatico |
| 3.3.9 | Autenticazione accessibile (avanzato) | AAA | manuale |
Cosa controlla lo scanner, regola per regola
Ogni regola automatica porta entrambi i riferimenti, così un riscontro si legge come un criterio di successo WCAG per lo sviluppatore e come una clausola di EN 301 549 per il revisore. Queste sono le regole precaricate nella tabella di corrispondenza pubblica; il catalogo nel prodotto è più ampio ed è mantenuto centralmente.74 rules seeded
| Regola | What it detects | WCAG | EN 301 549 | Impatto tipico |
|---|---|---|---|---|
| accesskeys | Two elements claim the same access key | 2.1.1 | 9.2.1.1 | serious |
| area-alt | Image map region without alternative text | 1.1.1, 2.4.4, 4.1.2 | 9.1.1.1, 9.2.4.4, 9.4.1.2 | critical |
| aria-allowed-attr | ARIA attribute not allowed on this role | 4.1.2 | 9.4.1.2 | critical |
| aria-command-name | Custom button, link or menu item without a name | 4.1.2 | 9.4.1.2 | serious |
| aria-hidden-body | Whole document hidden from assistive technology | 4.1.2 | 9.4.1.2 | critical |
| aria-hidden-focus | Focusable element hidden from assistive technology | 1.3.1, 4.1.2 | 9.1.3.1, 9.4.1.2 | serious |
| aria-input-field-name | Custom input field without an accessible name | 4.1.2 | 9.4.1.2 | serious |
| aria-meter-name | Meter without an accessible name | 1.1.1 | 9.1.1.1 | serious |
| aria-progressbar-name | Progress indicator without an accessible name | 1.1.1 | 9.1.1.1 | serious |
| aria-required-attr | ARIA role missing a required attribute | 4.1.2 | 9.4.1.2 | critical |
| aria-required-children | Composite role without its required child roles | 1.3.1 | 9.1.3.1 | critical |
| aria-required-parent | ARIA role placed outside its required container | 1.3.1 | 9.1.3.1 | critical |
| aria-roles | Role value is not a recognised ARIA role | 4.1.2 | 9.4.1.2 | critical |
| aria-toggle-field-name | Checkbox, radio or switch without an accessible name | 4.1.2 | 9.4.1.2 | serious |
| aria-tooltip-name | Tooltip role without any text | 4.1.2 | 9.4.1.2 | serious |
| aria-valid-attr | Attribute name is not a valid ARIA attribute | 4.1.2 | 9.4.1.2 | critical |
| aria-valid-attr-value | ARIA attribute points at a value that does not resolve | 4.1.2 | 9.4.1.2 | critical |
| audio-caption | Audio without a captions or transcript track | 1.2.1 | 9.1.2.1 | critical |
| autocomplete-valid | autocomplete value not recognised | 1.3.5 | 9.1.3.5 | serious |
| avoid-inline-spacing | Text spacing locked by an inline style | 1.4.12 | 9.1.4.12 | serious |
| blink | Blinking content that cannot be stopped | 2.2.2 | 9.2.2.2 | serious |
| button-name | Button without an accessible name | 4.1.2 | 9.4.1.2 | critical |
| bypass | No way to skip the repeated navigation | 2.4.1 | 9.2.4.1 | serious |
| color-contrast | Text contrast below the required ratio | 1.4.3 | 9.1.4.3 | serious |
| css-orientation-lock | Content locked to one screen orientation | 1.3.4 | 9.1.3.4 | serious |
| definition-list | Definition list built from the wrong children | 1.3.1 | 9.1.3.1 | serious |
| dlitem | Definition term or description outside a list | 1.3.1 | 9.1.3.1 | serious |
| document-title | Page has no title | 2.4.2 | 9.2.4.2 | serious |
| duplicate-id-active | Duplicate id on an interactive element | 4.1.1 | 9.4.1.1 | serious |
| empty-heading | Heading with no text | 1.3.1 | 9.1.3.1 | minor |
| empty-table-header | Table header cell with no text | 1.3.1 | 9.1.3.1 | minor |
| focus-order-semantics | Focusable element with no interactive role | 2.4.3 | 9.2.4.3 | minor |
| form-field-multiple-labels | Field bound to more than one label | 3.3.2 | 9.3.3.2 | moderate |
| frame-title | Frame without a title | 2.4.1, 4.1.2 | 9.2.4.1, 9.4.1.2 | serious |
| heading-order | Heading level skipped | 1.3.1 | 9.1.3.1 | moderate |
| html-has-lang | Page language not declared | 3.1.1 | 9.3.1.1 | serious |
| html-lang-valid | Page language code is not valid | 3.1.1 | 9.3.1.1 | serious |
| html-xml-lang-mismatch | lang and xml:lang disagree | 3.1.1 | 9.3.1.1 | moderate |
| identical-links-same-purpose | Links with the same text lead somewhere different | 2.4.9 | 9.2.4.9 | minor |
| image-alt | Image without a text alternative | 1.1.1 | 9.1.1.1 | critical |
| input-button-name | Input button with no value or label | 4.1.2 | 9.4.1.2 | critical |
| input-image-alt | Image button without alternative text | 1.1.1, 4.1.2 | 9.1.1.1, 9.4.1.2 | critical |
| label | Form field without a programmatic label | 1.3.1, 4.1.2 | 9.1.3.1, 9.4.1.2 | critical |
| landmark-banner-is-top-level | Banner landmark nested inside another region | 1.3.1 | 9.1.3.1 | moderate |
| landmark-complementary-is-top-level | Complementary landmark nested inside another region | 1.3.1 | 9.1.3.1 | moderate |
| landmark-no-duplicate-main | More than one main landmark on the page | 1.3.1 | 9.1.3.1 | moderate |
| landmark-one-main | Page has no single main landmark | 1.3.1, 2.4.1 | 9.1.3.1, 9.2.4.1 | moderate |
| landmark-unique | Two landmarks share a role and a name | 1.3.1 | 9.1.3.1 | moderate |
| link-name | Link without discernible text | 2.4.4, 4.1.2 | 9.2.4.4, 9.4.1.2 | serious |
| list | List contains elements that are not list items | 1.3.1 | 9.1.3.1 | moderate |
| listitem | List item outside a list | 1.3.1 | 9.1.3.1 | serious |
| marquee | Scrolling marquee content | 2.2.2 | 9.2.2.2 | serious |
| meta-viewport | Zoom disabled by the viewport meta tag | 1.4.4 | 9.1.4.4 | serious |
| nested-interactive | Interactive control nested inside another | 4.1.2 | 9.4.1.2 | serious |
| no-autoplay-audio | Audio starts on its own for more than three seconds | 1.4.2 | 9.1.4.2 | moderate |
| object-alt | Embedded object without a text alternative | 1.1.1 | 9.1.1.1 | serious |
| p-as-heading | Paragraph styled to look like a heading | 1.3.1 | 9.1.3.1 | serious |
| page-has-heading-one | Page has no level one heading | 1.3.1 | 9.1.3.1 | moderate |
| presentation-role-conflict | Presentation role cancelled by other markup | 4.1.2 | 9.4.1.2 | minor |
| region | Content sits outside any landmark | 1.3.1 | 9.1.3.1 | moderate |
| role-img-alt | Element with role img has no alternative text | 1.1.1 | 9.1.1.1 | serious |
| scrollable-region-focusable | Scrollable area cannot be reached by keyboard | 2.1.1 | 9.2.1.1 | serious |
| select-name | Select element without an accessible name | 1.3.1, 4.1.2 | 9.1.3.1, 9.4.1.2 | critical |
| server-side-image-map | Server-side image map in use | 2.1.1 | 9.2.1.1 | minor |
| summary-name | Disclosure summary without a name | 4.1.2 | 9.4.1.2 | serious |
| svg-img-alt | Meaningful SVG without a text alternative | 1.1.1 | 9.1.1.1 | serious |
| tabindex | Positive tabindex overrides the natural focus order | 2.4.3 | 9.2.4.3 | serious |
| table-fake-caption | Table title styled as a caption instead of marked as one | 1.3.1 | 9.1.3.1 | serious |
| target-size | Touch target smaller than 24 by 24 pixels | 2.5.8 | 9.2.5.8 | moderate |
| td-has-header | Data cell in a large table has no header | 1.3.1 | 9.1.3.1 | serious |
| td-headers-attr | Data cell not associated with a header | 1.3.1 | 9.1.3.1 | serious |
| th-has-data-cells | Table header with no data cells attached | 1.3.1 | 9.1.3.1 | serious |
| valid-lang | Language of a passage is not a valid code | 3.1.2 | 9.3.1.2 | serious |
| video-caption | Video without a captions track | 1.2.2 | 9.1.2.2 | critical |
Cosa può vedere l’automazione e cosa no
Accanto a ogni punteggio in Conforma c’è la stessa frase, perché il numero è solo una parte del quadro. Le regole automatiche sono eccellenti sulle proprietà misurabili e cieche all’intenzione.
I test automatizzati coprono solo una parte delle barriere all’accessibilità. Per una valutazione completa è necessaria una verifica manuale.
Come Conforma testa WCAG 2.2 AA
- Le regole automatiche girano su ogni pagina di una scansione, e ogni violazione viene scritta come un riscontro con la regola, il selettore, il frammento HTML e uno screenshot dell’elemento al suo posto.
- Ogni riscontro porta entrambi i riferimenti: il criterio di successo WCAG e la clausola di EN 301 549, così un rapporto si legge allo stesso modo per uno sviluppatore e per un revisore degli appalti.
- Ai riscontri viene assegnata un’impronta da regola, selettore e percorso. Una correzione che ritorna dopo un deploy viene segnalata come regressione invece di essere silenziosamente conteggiata come nuovo lavoro.
- La checklist manuale copre ciò che le regole non possono giudicare, con prova video, la tecnologia assistiva usata e un tester con nome, ed è sigillata nello stesso pacchetto di prove dell’esecuzione automatica.
Le domande che ci vengono poste
WCAG 2.2 AA equivale a soddisfare la legge sull’accessibilità?
No. L’European Accessibility Act è la legge, EN 301 549 è la norma armonizzata usata per dimostrarla, ed EN 301 549 fa riferimento a WCAG 2.2 livello AA per i contenuti web. Raggiungere l’AA è la base tecnica di una dichiarazione, non un certificato.
Dobbiamo passare da 2.1 a 2.2 ora?
Per tutto ciò che è nuovo, la risposta prudente è sì. WCAG 2.2 è retrocompatibile: un contenuto che soddisfa 2.2 soddisfa anche 2.1, quindi testare rispetto alla versione più recente non costa nulla e copre entrambe.
Un punteggio automatico perfetto significa che il sito è conforme?
Significa che nessuna violazione automatica è stata rilevata sulle pagine scansionate. L’uso da tastiera, l’ordine di focus e il flusso dello screen reader richiedono ancora una persona prima di qualsiasi affermazione.