Proves amb teclat, zoom al 200 i al 400 %, alt contrast i control per veu

No totes les persones amb discapacitat fan servir un lector de pantalla. Qui té una discapacitat motriu navega amb teclat, amb un polsador o amb la veu; qui té baixa visió amplia la pantalla, canvia els colors o ajusta l'espaiat del text. Aquestes proves són barates, no requereixen programari especialitzat i detecten una part enorme dels problemes dels principis Operable i Perceptible. Aquesta lliçó les organitza per tipus, indica quins criteris cobreixen i com registrar-ne els resultats.

Proves amb teclat

Deixa el ratolí de banda i recorre la pàgina amb Tab, Maj+Tab, Retorn, Espai, fletxes i Escapada. Comprova:

• 2.1.1 Teclat: tot el que es pot fer amb ratolí (obrir menús, tancar modals, canviar de pestanya, moure un control lliscant, tancar un avís) es pot fer amb teclat. Els enllaços s'activen amb Retorn; els botons, amb Retorn i Espai; els controls compostos (pestanyes, menús, botons d'opció, combos), amb fletxes segons els patrons de l'APG (s'obre en una finestra nova).
• 2.1.2 Sense paranys per al focus del teclat: es pot entrar a qualsevol component (reproductor, mapa, iframe, modal) i sortir-ne només amb teclat.
• 2.4.3 Ordre del focus: la seqüència de Tab segueix l'ordre visual i lògic; no hi ha salts a la capçalera des de la meitat d'un formulari ni elements invisibles que reben el focus.
• 2.4.7 Focus visible: en tot moment saps on ets; l'indicador no s'ha eliminat amb outline: none.
• 2.4.11 Focus no ocult (mínim): l'element amb focus no queda totalment tapat per capçaleres fixes, peus o bàners de galetes.
• 2.4.1 Evitar blocs: existeix un enllaç per saltar al contingut o landmarks que ho permeten.
• 2.1.4 Dreceres de teclat: si el lloc defineix dreceres d'una sola tecla, es poden desactivar o reassignar, o només actuen amb el focus en un component.
• 3.2.1 En rebre el focus: tabular fins a un element no provoca canvis de context (no obre res ni envia el formulari).

A macOS, Safari necessita l'opció «Prémer Tab per ressaltar cada element» i Firefox depèn de l'ajust del sistema «Navegació amb teclat» a Teclat; sense ells Tab salta els enllaços i semblarà una fallada del lloc.

Zoom i reflow

Hi ha tres proves diferents, per a tres criteris diferents:

1. 1.4.4 Canvi de mida del text (AA): amb el zoom del navegador al 200 % (Ctrl + «+» fins que el navegador indiqui 200 %), el text és llegible i no se superposa, no es talla ni es perd funcionalitat. Firefox permet a més «Només zoom del text» (menú Visualitza, Zoom), que és més exigent perquè no escala la resta de la maquetació.
2. 1.4.10 Reajustament dels elements (AA): el contingut s'ha de presentar sense desplaçament en dues dimensions a 320 píxels CSS d'amplada per al contingut amb desplaçament vertical (equival a una finestra de 1280 px al 400 %) i a 256 px d'alçada per al contingut amb desplaçament horitzontal. Prova: finestra a 1280 px i zoom al 400 %, o eines per a desenvolupadors amb viewport de 320 px. S'exceptua el contingut que necessita dues dimensions (taules de dades, mapes, diagrames, vídeo, barres d'eines).
3. 1.4.12 Espaiat del text (AA): aplicant interlineat 1,5, espai entre paràgrafs 2 vegades la mida de la lletra, espaiat entre lletres 0,12 em i entre paraules 0,16 em, no es perd contingut ni funcionalitat. Es prova amb un bookmarklet o un full d'estils d'usuari que injecti aquestes propietats amb !important.

Fallades típiques en ampliar: menús que desapareixen i no se substitueixen per un botó, textos tallats en botons d'amplada fixa, contingut en overflow: hidden, modals el botó de tancament dels quals queda fora de la pantalla, capçaleres fixes que ocupen mitja pantalla al 400 %.

Alt contrast i colors forçats

Moltes persones amb baixa visió fan servir els temes de contrast de Windows (Configuració, Accessibilitat, Temes de contrast; drecera Alt esq.+Maj esq.+Impr Pant), que substitueixen tots els colors de la pàgina per una paleta del sistema i eliminen les imatges de fons. En provar amb un d'actiu, comprova que:

• els botons, enllaços i camps encara es distingeixen (les vores no depenen d'un fons de color que ha desaparegut);
• l'indicador de focus continua sent visible;
• les icones que eren imatges de fons CSS no han desaparegut deixant botons buits;
• l'estat seleccionat de pestanyes, filtres o passos no s'indica només amb un color de fons.

Les WCAG 2.2 no tenen un criteri específic per a modes de contrast forçat, però les fallades que revelen solen ser de l'1.4.1 Ús del color, l'1.4.11 Contrast no textual o el 2.4.7 Focus visible, i a més afecten persones usuàries reals. En CSS, la consulta @media (forced-colors: active) i les paraules clau de colors del sistema (CanvasText, ButtonText, Highlight) permeten corregir-les.

Comprova també la preferència prefers-reduced-motion (animacions) i prefers-color-scheme (mode fosc): si el lloc ofereix mode fosc, mesura-hi el contrast; és una versió més de la pàgina.

Control per veu

Dragon (Nuance) i Accés per veu de Windows 11, Control per veu de macOS i iOS i Voice Access d'Android permeten activar controls dient-ne el nom («prémer Enviar») o mostrant números sobre cada element interactiu («mostrar números», «prémer 7»). Per auditar n'hi ha prou amb el control per veu integrat a macOS o iOS:

• 2.5.3 Etiqueta en el nom: el nom accessible d'un control ha de contenir el text visible. Si el botó mostra «Cercar» però el seu aria-label és «Enviar la consulta», dir «prémer Cercar» no funciona.
• 4.1.2: els controls sense nom o que no són controls reals no reben número ni responen a ordres.
• 1.1.1 i 2.4.4: els botons només amb icona necessiten un nom pronunciable i raonable («Tancar», no «Icona X»).

Altres ajudes que convé conèixer

Els magnificadors (Lupa de Windows amb Win+«+», Zoom de macOS, ZoomText) amplien una part de la pantalla: amb ells es detecten indicadors de funció i menús que apareixen lluny del punter, i contingut que depèn de veure tota la pantalla alhora (1.4.13, 3.3.1). Els polsadors (Control per botó a iOS, Accés amb interruptors a Android) recorren els elements interactius de manera seqüencial: tot el que falla amb teclat falla amb ells, i a més penalitzen l'excés d'elements que reben el focus.

Resum

• Teclat: Tab, Maj+Tab, Retorn, Espai, fletxes i Escapada cobreixen el 2.1.1, el 2.1.2, el 2.4.3, el 2.4.7, el 2.4.11, el 2.4.1, el 2.1.4 i el 3.2.1; configura Safari i Firefox a macOS abans.
• Zoom: 200 % per a l'1.4.4; 400 % o 320 px per a l'1.4.10 Reajustament dels elements; bookmarklet d'espaiat per a l'1.4.12.
• Els temes de contrast de Windows i forced-colors revelen fallades de l'1.4.1, l'1.4.11 i el 2.4.7; mesura també el mode fosc si n'hi ha.
• El control per veu comprova el 2.5.3 Etiqueta en el nom i els noms accessibles de controls i icones.
• Els magnificadors i els polsadors completen la bateria; totes aquestes proves van al protocol de cada pàgina.