Le tabelle HTML sono un ottimo modo per migliorare l’accessibilità delle tabelle HTML. Aiutano le persone a comprendere informazioni che altrimenti sarebbero difficili da leggere. Ad esempio, gli utenti possono vedere in che modo le informazioni in ogni cella sono correlate ad altre informazioni nella tabella scansionandole rapidamente. Ma questo rende anche più difficile per i non vedenti capire come queste cellule combacino.
E se è difficile per loro raggiungere i tuoi tavoli, impedirai a molte persone di utilizzare il tuo prodotto. Possiamo risolvere questo problema scrivendo correttamente il codice HTML in modo che gli screen reader possano capirlo. E per farlo, dovrai sapere come rendere le tabelle HTML più facili da usare. Imparerai di più sull’accessibilità delle tabelle HTML e su come creare tabelle accessibili in questo articolo.
Come migliorare l’accessibilità delle tabelle HTML
Utilizza gli attributi alt in modo significativo
La persona che ha scritto il contenuto ha deciso di utilizzare le immagini del segno di spunta verde per mostrare quando una caratteristica del piano fa parte di un determinato piano, ma si è dimenticata di aggiungere gli attributi alt. Gli utenti di AT non possono sapere quando viene aggiunta una funzione perché le immagini nelle celle non dicono loro nulla.
Per risolvere questo problema, assicurati che le immagini abbiano un testo alternativo che indichi all’utente qual è l’immagine riguarda. Anche se sembra giusto, un attributo alt di”segno di spunta”non significherebbe nulla. Ho usato invece la frase”caratteristica inclusa”. (Anche se penso che sarebbe meglio usare un carattere icona piuttosto che un’immagine.)
Didascalia a quella tabella
Questa tabella sembra avere una didascalia che dice”Scegli un piano, ” ma quel testo è in realtà un titolo di livello h3>. Spostandolo all’interno dell’elemento table> e contrassegnandolo come didascalia> consente alle tecnologie assistive, come uno screen reader, di sapere che il testo è correlato alla tabella> in modo programmatico.
Includi il testo dell’intestazione per ogni colonna
In questo caso, la prima cella della tabella è vuota. Riga 1 La colonna 1 viene letta dallo screen reader. Tutto fatto. Ma per quanto riguarda il resto delle informazioni in queste celle? È necessaria un’intestazione che indichi cosa sono.
L’autore del contenuto non vuole un’intestazione per la prima colonna dal punto di vista visivo, ma gli utenti di AT traggono vantaggio quando il nome della colonna viene pronunciato prima del contenuto delle celle successive.
Controlla il tuo (con)testo
Gli screen reader non sempre funzionano come ti aspetteresti con abbreviazioni e punteggiatura. Questa tabella mi ha mostrato due esempi interessanti. Innanzitutto, il numero di utenti per il piano Team sembra”2-50″, ma viene annunciato come”250″perché il trattino non viene visualizzato. Per assicurarci che sia chiaro, possiamo aggiungere la parola”a”come testo ausiliario nascosto e, per sicurezza, possiamo nascondere il trattino da AT.
Cos’è l’accessibilità alle tabelle HTML?
Ci sono funzionalità che rendono il software e i siti web più facili da usare per le persone con disabilità. Alcune di queste funzioni sono scorciatoie da tastiera, sintesi vocale, accesso per persone daltoniche, didascalie, audio mono e altro ancora. Quindi, cos’è esattamente l’accessibilità alle tabelle HTML?
Gli screen reader sono un tipo di strumento di accessibilità che aiuta i non vedenti a capire cosa c’è su un sito web o un’app. Questi utili strumenti leggono le informazioni ad alta voce dai tag HTML. Ma come fanno gli screen reader a dare un senso alle tabelle HTML?
Gli screen reader vanno da sinistra a destra e dall’alto verso il basso durante la lettura delle tabelle HTML. Per questo motivo, è spesso difficile per loro capire dove si trova una cella o come si collega a un’altra cella o all’intestazione. Pertanto, gli sviluppatori dovrebbero scrivere codice HTML corretto che possa essere letto dalle tecnologie che aiutano le persone con disabilità. Nella parte successiva, parleremo di come puoi farlo.