5 Casi Studio interessanti scoperti usando Inspect

Nell’esempio, WebAIM usa l’alt-text per informare che sotto all’immagine è disponibile la versione testuale. È un sistema molto semplice che usa HTML puro in modo intelligente.

Questo fa capire che:

• L’uso dell’Alt-text dipende dal contesto;
• Ci sono vari approcci:
  • alt-text con location (come nell’esempio);
  • link vicino all’immagine che porta alla spiegazione;
  • figure e figcaption con spiegazione
  • Aria-description;
  • aria-describedby.

Link: https://www.helsinki.fi/
Nell’esempio, le card degli articoli hanno link “Read more” che sarebbero difficili da interpretare per chi usa tecnologie assistive. I link sono migliorati con l’aggiunta di aria-label che sovrascrive il link.

• aria-label;
• aria-labelledby;
• usare della classe css scree-reader-only;
• togliere il link “Read more”e metterlo nel titolo.

Il metodo usato in questo caso usa aria-label con un semplice automatismo che aggiunge il titolo dell’articolo per personalizzare “Read more”.

Link: https://lnkd.in/e3se6S5X
Nell’esempio, l’articolo di The Guardian ha una struttura costruita in Grid CSS e le aree sono identificate dalla loro funzione.

• Grid semplifica la costruzione dei layout;
• La proprietà grid-template-areas permette di creare strutture più leggibili, accessibili, mantenibili nel tempo, organizzate.

Link: https://webaim.org/
Nell’esempio, non capivo come si potesse aggiungere la transizione al focus su link, bottoni, input. Chi usa la tastiera per navigare sui siti sa bene che a volte è difficile capire dove si sposta il focus.

Sul sito WebAIM è usata la soluzione focus-transition.js (link nel commento) che aggiunge le transizioni al focus. Semplice ed efficace, da provare.

Link: https://axesslab.com/sv
Nell’esempio, il sito svedese Axess Lab ha alcuni contenuti in lingua inglese. Per comunicare allo Screen Reader di leggere quei contenuti in inglese, usa il parametro lang=”en”.

• Il parametro lang=”…” non è solo per il tag HEAD all’inizio del DOM;
• Si può usare anche nella pagina per contenuti in altre lingue diverse da quella principale;
• Axess Lab lo usa sia per la card nell’archivio blog, sia per l’articolo vero e proprio.

Be curious Be accessible!