Salta al contenuto

Blog ·

Un’eccezione di accessibilità che si misura

Ogni verifica di accessibilità finisce con un elenco di eccezioni. Le nostre sono due, ognuna con una misurazione, e l’esecuzione fallisce se una non combacia.

Di Provibr

Si punti un verificatore automatico di accessibilità su un prodotto reale e si otterrà un numero. Si corregga tutto ciò che ha trovato e si otterrà un numero più piccolo. Da qualche parte in quel percorso si incontrerà un rilievo che davvero non è un difetto, e in quel momento si scrive la propria prima eccezione.

È lì la parte interessante, perché l’elenco delle eccezioni è il posto in cui un programma di accessibilità muore in silenzio. Comincia con due voci ben argomentate. Un anno dopo ne ha undici, tre delle quali non corrispondono più a nulla, una delle quali nasconde un problema vero, e nessuno ricorda perché ce ne sia una qualsiasi. Il rapporto dice zero e non significa niente.

Abbiamo costruito il verificatore per il nostro pannello questo mese. Non riporta rilievi di alcuna gravità, e questo testo parla soprattutto del perché non crediamo a quel numero preso da solo.

Tre regole erano disattivate per impostazione predefinita, e due nascondevano rilievi

La libreria che usiamo consegna alcune regole disattivate per impostazione predefinita. Abbiamo controllato quali, chiedendolo alla libreria invece di supporlo: discordanza fra nome e contenuto, celle di tabella senza intestazione e dimensione del target sono tutte spente appena estratte dalla scatola.

Due di quelle hanno prodotto rilievi reali sul nostro pannello, 36 in tutto, compresi entrambi i due punti che una tornata precedente aveva lasciato aperti. Quindi un verificatore che gira con l’insieme di regole predefinito è verde esattamente sui guasti che qualcuno era già andato a cercare, che è il peggior tipo di verde: è indistinguibile da un prodotto che sta bene.

Sono state accese esplicitamente, e quella singola decisione ha cambiato il punto di partenza più di qualsiasi altra scelta di configurazione.

Nove lingue, perché una lingua sola è un lancio di moneta

Il selettore di lingua nella nostra intestazione mostra un codice di due lettere e ha un nome accessibile che dice di quale lingua si tratta. In inglese il pulsante riporta EN e si chiama «Language: English», e la regola passa, perché en compare per caso dentro English.

In olandese fallisce. Stesso componente, stesso codice, stesso markup.

Misurando su tutte e nove le lingue che pubblichiamo: tre falliscono e sei passano, e ognuna di quelle sei passa per coincidenza: en dentro English, de dentro Deutsch, fr dentro Français, it dentro Italiano, es dentro Español, ro dentro Română. Provare qui una lingua sola è verde a vuoto.

Perciò il percorso marketing esegue ogni lingua sulle regole il cui esito può dipendere dalla lingua. Costa tempo ed è l’unico modo per cui quel rilievo esista.

Il punto di partenza, e di che cosa era fatto

La prima esecuzione completa su marketing, accesso e pannello con sessione attiva ha riportato 3 rilievi critici, 51 gravi, 72 moderati e 6 minori. Otto regole spiegavano tutto.

RegolaRilievi
contenuto fuori da un landmark60
discordanza fra nome e contenuto33
contrasto di colore13
nessun landmark main9
intestazione di tabella vuota6
regione scorrevole non focalizzabile5
cella di tabella senza intestazione3
ordine delle intestazioni3

Quasi tutto era strutturale e non visivo. Le pagine di accesso e il pannello non avevano un elemento main né uno skip link. Le tabelle degli articoli avevano intestazioni vuote. I blocchi di codice scorrono in orizzontale e non erano raggiungibili da tastiera, il che significa che chi usa la tastiera semplicemente non può leggere il lato destro di un comando lungo. La scheda delle statistiche metteva l’intestazione di un grafico al livello sbagliato sotto l’intestazione di pagina.

Dopo le riparazioni: zero, zero, zero, zero. Il che ci riporta alla domanda su quanto valga quello zero.

Due eccezioni, ciascuna con una misurazione

L’elenco delle eccezioni ha esattamente due voci, e ognuna di esse porta con sé una ragione e una misurazione che è stata davvero eseguita.

Contrasto di colore con i colori forzati. Eseguire il pannello con i colori forzati attivi ha prodotto 610 fallimenti di contrasto su dodici pagine. Non è un difetto di prodotto, è un’interazione fra il verificatore e il browser. Il verificatore legge -webkit-text-fill-color prima di color, e Chrome non forza la prima. Sulla pagina di accesso, sulla stessa intestazione, nello stesso caricamento di pagina:

proprietànormalecolori forzati
colorrgb(16, 19, 25)rgb(255, 255, 255)
-webkit-text-fill-colorrgb(16, 19, 25)rgb(16, 19, 25)
sfondo della paginargb(244, 246, 248)rgb(0, 0, 0)

Confronta quindi il primo piano dichiarato con lo sfondo forzato e riporta 1,12 a 1 dove lo schermo mostra in realtà 21 a 1. In quella modalità il requisito di contrasto comunque non si applica, perché la tavolozza appartiene all’utente.

La regola è disattivata in quella sola modalità, e la ragione viene rimisurata a ogni esecuzione. Se Chrome o il verificatore correggeranno questa cosa, quell’autoverifica fallisce e l’eccezione va argomentata di nuovo. Un’eccezione senza autoverifica è una allowlist silenziosa.

Il pulsante dell’account. La regola sulla discordanza fra nome e contenuto scatta sul pulsante del menu utente nel pannello. Sono stati messi sul pulsante reale sei nomi accessibili candidati e la regola è stata eseguita contro ciascuno. Passa soltanto quando il nome contiene letteralmente la stringa DKDemo Klant€0.00, in cui le iniziali e il nome dell’account sono stati attaccati l’uno all’altro, e fallisce con lo stesso testo distanziato come DK Demo Klant €0.00 e con il nome reale. Tutti e tre i figli di quel pulsante sono nascosti alle tecnologie assistive, cosa che la regola ignora.

Passare significherebbe quindi che uno screen reader annuncia DKDemo come una parola sola. Sarebbe un pulsante peggiore, adottato per soddisfare una regola che la libreria stessa segna come sperimentale e consegna disattivata. Il requisito funzionale è soddisfatto: chi usa il controllo vocale dice «Demo Klant», e quello è nel nome.

L’eccezione che è morta senza dire niente

Questa è la parte che vale tutto l’articolo.

Un’eccezione deve riconoscere l’elemento a cui si applica. Il selettore CSS del verificatore non è abbastanza stabile per farlo: lo stesso pulsante dell’account veniva identificato in un modo su una pagina e in un altro su quella dopo, quindi un’eccezione che corrisponde sul selettore copre una pagina e non l’altra. L’eccezione corrisponde invece su un attributo marcatore che il componente stesso imposta, dentro il frammento HTML dell’elemento.

Il frammento che il verificatore riporta è troncato a 140 caratteri.

L’etichetta accessibile del pulsante è cresciuta, perché ci è stato aggiunto il credito dell’account. Il marcatore è scivolato oltre il confine dei 140 caratteri. Il frammento adesso finiva con ... Credit €0.00." data-us. L’eccezione non corrispondeva più a nulla, in silenzio, e l’esecuzione ha riportato 27 rilievi gravi che l’esecuzione precedente aveva coperto.

Niente di quel guasto fa rumore. L’eccezione non ha dato errore, l’elenco non si è accorciato, nessuna configurazione è cambiata. Una modifica di interfaccia in una funzionalità estranea ha spostato una stringa, e un pezzo di infrastruttura di sicurezza ha smesso di funzionare. La correzione è confrontare con il tag di apertura non troncato, che il verificatore fornisce ugualmente.

La lezione generale è più ampia dell’accessibilità: qualunque cosa confronti su testo troncato è una protezione che cede esattamente nel momento in cui qualcosa cambia, che è l’unico momento in cui serviva.

Un’eccezione che non corrisponde a nulla fa fallire l’esecuzione

Ogni voce viene contata. Se un’esecuzione completa finisce con un’eccezione che è stata colpita zero volte, l’esecuzione è rossa.

È la stessa forma di un elenco di costanti altrove in questo codice, e per la stessa ragione: un’eccezione che non copre più nulla va cancellata, non lasciata in piedi. Lasciata in piedi, è una riga in più su cui la persona successiva deve ragionare, e alla fine smette del tutto di essere letta.

Il conteggio vale solo per un’esecuzione completa. Si limiti l’esecuzione a un percorso o a una modalità e «non colpita» non significa nulla.

Dimostrare che uno zero è uno zero vero

La dimensione del target, il requisito per cui un controllo sia grande almeno 24 per 24 pixel, è una delle tre regole che la libreria consegna disattivate. L’abbiamo accesa e accanto le abbiamo scritto una seconda misurazione nostra, perché le due eccezioni che lo standard stesso concede vanno misurate e non date per scontate. L’esecuzione finale ha esaminato 2056 target. 155 erano sotto la misura. Di quelli, 70 ricadevano sotto l’eccezione inline dello standard, cioè il target sta dentro una frase, e 85 sotto l’eccezione di spaziatura, cioè un cerchio di 24 pixel attorno a esso non tocca nient’altro. Zero sono rimasti.

Uno zero che viene da una sonda scritta da noi non si distingue da una sonda incapace di riportare alcunché. Perciò uno script separato inietta un pulsante di 16 per 16 pixel accanto a un vicino su una pagina viva e ci esegue sopra questo stesso testo di sonda, letto dal file sorgente invece che copiato. Passa da 0 a 1 e nomina l’elemento. Il percorso di segnalazione funziona, quindi lo zero è un esito e non un silenzio.

Entrambe le eccezioni dello standard sono misurate e non supposte. Inline significa che il valore calcolato di display è esattamente inline e che il più vicino antenato di blocco contiene anche altro testo, che è ciò che «sta dentro una frase» vuol dire davvero. Non è un elenco di nomi di classe. E il test di spaziatura misura il cerchio contro i rettangoli degli altri target invece che contro i loro cerchi, il che è più severo dello standard: può produrre un falso rosso, mai un falso verde.

Che cosa una macchina non può fare

C’è un breve runbook di quattro verifiche che richiedono una persona, perché sono le cose a cui nessun verificatore arriva: se l’ordine di lettura abbia senso e un annuncio arrivi davvero, se un percorso sia percorribile con la sola tastiera invece che soltanto raggiungibile, se l’impaginazione resti leggibile al 200 per cento invece che soltanto entrarci, e se la schermata significhi ancora qualcosa nella tavolozza dell’utente.

Quelle quattro sono aperte. Dirlo fa parte del punto: un rapporto che dice zero e non dice che cosa non ha guardato è lo stesso guasto di un’eccezione senza misurazione.

Che cosa metteremmo per iscritto

  1. Chiedere alla libreria quali regole sono disattivate, non supporlo. Quelle spente sono il posto in cui stavano i nostri rilievi.
  2. Eseguire ogni lingua che si pubblica su qualsiasi regola il cui esito possa dipendere dal testo.
  3. Dare a ogni eccezione una ragione e una misurazione, scritte dove vive l’eccezione.
  4. Fare in modo che un’eccezione che non corrisponde a nulla faccia fallire l’esecuzione.
  5. Non confrontare mai una protezione con testo troncato.
  6. Dimostrare i propri zeri iniettando qualcosa che dovrebbe essere catturato.
  7. Pubblicare ciò che una macchina non può controllare, così che il numero venga letto per quello che è.

Lo stesso istinto, applicato alle traduzioni invece che al markup, sta in sedicimila chiavi, nove lingue.

Dal lavoro sul pannello di Provibr.

Inizi con un host e un agente

Crei un account, installi l’agente con un solo comando e colleghi il suo primo host Proxmox. Il periodo di prova dura 14 giorni e non chiede alcun dato di pagamento.