L'ordine dei contenuti nel documento è importante per l'accessibilità del sito. Uno screen reader leggerà i contenuti in base all'ordine del documento, utilizzando gli elementi HTML selezionati per dare significato a quei contenuti. Una persona che naviga nel sito utilizzando una tastiera, anziché un touchscreen o un mouse, accederà alla schermata del documento con una scheda. Ciò significa che passeranno dall'elemento attivo all'elemento attivo, passando tra i link e i campi del modulo, sempre nell'ordine in cui sono presenti nel documento.
È quindi fondamentale iniziare con un documento ben strutturato e usare tutti gli elementi HTML giusti per creare un sito accessibile. Tuttavia, è possibile annullare parte di questa operazione quando inizi a utilizzare CSS. Vediamo perché.
Origine e ordine visivo
La navigazione nel sito web è spesso contrassegnata come un elenco di link. Puoi quindi utilizzare Flexbox per trasformarli in una barra orizzontale. Nell'esempio di Glitch riportato di seguito, ho creato questo pattern di uso comune. Fai clic sull'esempio e premi Tab tra i link. L'elemento attivo si sposterà in una direzione logica da sinistra a destra, nell'ordine in cui leggiamo in inglese.
Se hai creato questo tipo di pattern e ti è stato chiesto di spostare Contattaci, che è il secondo nella fonte, fino alla fine. Puoi utilizzare la proprietà order che funziona in Flexbox.
Prova a spostarti tra gli elementi nell'esempio seguente, che ha utilizzato la proprietà order per riorganizzarli.
Lo stato attivo passa all'elemento finale e poi di nuovo indietro. Per quanto riguarda l'ordine delle schede, l'elemento è il secondo. A livello visivo, però, è l'ultimo elemento.
L'esempio sopra evidenzia il problema che dobbiamo affrontare se riordinamo e riordinamo i contenuti utilizzando CSS. Se dovessi avere a che fare con questo problema, la cosa giusta da fare sarebbe modificare l'ordine nell'origine, invece di utilizzare CSS.
Quali proprietà CSS possono causare il riordinamento?
Qualsiasi metodo di layout che consenta di spostare gli elementi può causare questo problema. Le seguenti proprietà CSS di solito causano problemi di riordinamento dei contenuti:
- Utilizzo di
position: absoluteper eliminare visivamente un elemento. - La proprietà
ordernel layout Flexbox e griglia. - I valori
row-reverseecolumn-reverseperflex-directionin Flexbox. - Il valore
densepergrid-auto-flownel layout griglia. - Qualsiasi posizionamento per nome o numero della riga oppure con
grid-template-areasin layout griglia.
In questo esempio successivo, ho creato un layout utilizzando la griglia CSS e posizionato gli elementi utilizzando i numeri di riga, senza considerare dove si trovano nell'origine.
Prova a spostarti attorno all'esempio con il tasto Tab e osserva come viene spostato l'elemento attivo. Ciò crea un'esperienza molto confusa, soprattutto se si tratta di una pagina lunga.
Test del problema
Un test molto semplice consiste nello navigare all'interno della pagina con la tastiera. Riesci a capire tutto? Sono presenti salti strani mentre lo fai?
Per una dimostrazione visiva del riordinamento dei contenuti, prova a utilizzare la funzionalità di controllo Interrompi schede nell'estensione Statistiche accessibilità per Chrome. La seguente immagine mostra l'esempio della griglia CSS nello strumento. Puoi vedere come l'elemento attivo si sposta nel layout.
Riordinamento dei contenuti e web design reattivo
Se i tuoi contenuti sono presenti in un'unica presentazione, di solito non è difficile inserire la fonte in un ordine logico e Può diventare più difficile se si considera il layout in corrispondenza di punti di interruzione diversi. Ad esempio, potrebbe essere utile spostare un elemento nella parte inferiore del layout su schermi più piccoli.
Al momento non esiste una buona soluzione per questo problema. Nella maggior parte delle situazioni, sviluppare in modo "mobile first" ti aiuterà a mantenere in ordine la fonte e il layout. Le scelte che fai in merito alla priorità sui dispositivi mobili sono spesso solide per quanto riguarda i contenuti in generale. La chiave è essere consapevoli della possibilità che questo tipo di riordinamento dei contenuti sia possibile e verificare che l'esperienza finale non sia troppo fastidiosa a ogni punto di interruzione.