Ciao, bentornato.
In questa lezione parleremo di navigazione accessibile.
So che questo corso riguarda principalmente i CSS, ma mi piace sempre fare un salto e
ricordarti le diverse cose a cui devi
pensare mentre stai disegnando le tue pagine.
La navigazione è davvero l'aspetto più critico dell'accessibilità.
Se le persone non riescono a navigare nella tua pagina e ad
accedere ai contenuti di cui hanno veramente bisogno, allora hai davvero sprecato il loro tempo e alcuni dei tuoi.
Quindi, gli utenti citati hanno questo tipo di cose collaudate e vere che cercano
su una pagina.
Sanno cos'è una casella di ricerca.
Sanno dove va di solito lo striscione.
Dove si trova la navigazione principale.
E non sorprende loro che spesso il contenuto principale,
in quello che chiamiamo bene il contenuto, sia nascosto in basso in una pagina.
E lo sappiamo perché possiamo vederlo non appena apriamo il browser.
Ma per gli utenti non vedenti o ipovedenti, hanno davvero bisogno
di fare affidamento sulla corretta codifica della pagina per ottenere ciò che vogliono arrivare a.
E non solo la corretta codifica, ma ci
sono molti problemi stilistici a cui devi pensare quando stai facendo questo.
E se non ci vedessi?
Il primo posto in cui ottieni informazioni è dal titolo della pagina.
Vuoi assicurarti che il tuo titolo sia breve, ma
consente anche all'utente di sapere in che modo questa pagina è diversa dalle altre pagine del tuo sito.
Successivamente, il corretto posizionamento dell'intestazione, e il tipo di questa gerarchia,
consente agli utenti dello schermo di saltare i diversi collegamenti di navigazione e
ottenere direttamente ciò che stanno cercando.
Penso che siate stati tutti in luoghi dove sembra che abbiate bisogno di andare in un posto e
poi seguite un altro e seguite un altro.
E questo può essere davvero fastidioso e irritante.
Soprattutto se è davvero importante che il mouse sia sul posto giusto.
Quindi vogliamo assicurarci di lasciare che gli screen reader e
gli altri utenti saltino direttamente dove vogliono andare.
Vogliamo anche pensare ai tuoi link.
Perché quando hai i link ai diversi siti nella tua pagina,
queste descrizioni sono tutto ciò che le persone hanno per loro.
Quindi non vuoi usare Click Me, Seguitemi qui.
Si desidera fornire buone informazioni in quelle descrizioni dei link.
Poi, dobbiamo parlare della corretta gerarchia delle intestazioni, ok?
Le intestazioni devono essere nidificate per fornire davvero una struttura, quindi
non dovresti avere intestazioni h3 prima di avere intestazioni h2.
Dovresti avere solo un titolo h1.
Non dovresti saltare da h2 a h4.
Invece, vuoi davvero seguire un certo tipo di ordine in modo
che le persone possano rendersi conto che c'è un significato dietro la tua pagina.
Quindi ecco un esempio proprio qui.
Ho la mia singola intestazione h1, e poi in questa pagina,
posso immaginare di avere tre sezioni.
Ognuna di quelle sezioni ha un'intestazione h2 al suo interno.
E nella mia prima sezione, potrebbe essere che ho questi piccoli punti puntati
o altri punti che sto facendo, dove sono abbastanza importanti da aver deciso hey,
userò h3 per indicare che questa è un'altra sottosezione all'interno della mia sezione.
Dove le persone si mettono nei guai e quello che vedi tutto il tempo, è che le persone decidono,
mi piace molto l'aspetto di quel font h2.
Mi piace quanto sia grande il testo.
Mi piace come il tipo di carattere che usano, quindi inserirò
quante più cose posso nel font h2 perché mi piace il modo in cui appare.
E non stanno pensando alla semantica.
La stessa cosa accade con il font h3.
Andrai alla pagina di qualcuno e scoprirai che non ci sono font h2.
Invece, sono tutti gli elementi h3, e l'
hanno fatto solo perché a loro piace l'aspetto di quel particolare tag.
Quindi ora, questo è dove entra in gioco lo styling,
ecco perché sto parlando di questo nella classe di styling.
È che ora sai che invece, se ti piace davvero l'aspetto di quell'intestazione h3,
invece di usare il tag, dovresti creare altri tag per replicare quel look.
Scopri quale famiglia di font usano.
Scopri quale dimensione del carattere.
Ripetilo e basta.
Non usare i tag solo perché ti piace il loro aspetto.
L' altra cosa a cui puoi pensare per aiutare la navigazione,
è questa idea di intestazioni fuori pagina.
È utile fare quando si desidera dare all'utente screen reader una sorta di
aiuto di navigazione, ma non si vuole mettere a destra nella pagina e
avere i vostri utenti vedenti hanno anche a che fare con esso tutto il tempo.
Permettetemi di farvi un esempio di questo.
Useremo i fogli di stile per impostare fondamentalmente qualcosa fuori pagina, gli
abbiamo dato il nome di offpage, e abbiamo detto
, hey, voglio posizionarlo in una posizione assoluta a sinistra di -1000px.
Quindi saprai che e' abbastanza lontano.
Ho qui la pagina delle Risorse Umane dell'Università del Michigan.
E se guardi in alto, non c'e' davvero niente,
quassu' nell'angolo in alto.
Ma quello che faro', e' andare avanti e premere Tab.
E, quello che fa Tab, è che mette a fuoco l'elemento successivo.
Quindi, vai avanti e Tab, ecco.
E potete vedere,
che ora, c'è questa nuova cosa qui che dice «Skip to main content».
Se clicco su di esso, vado fino in fondo, e sono stato in grado di
saltare un sacco di queste informazioni aggiuntive che non avevano davvero bisogno di vedere.
Era più solo marketing e cose diverse del genere.
Quindi, questi diversi collegamenti di navigazione fuori schermo sono estremamente utili per consentire
alle persone di saltare immediatamente a ciò che vogliono arrivare a.
Ma, usando lo stile,
abbiamo tolto dalla pagina che lo usi solo se lo vuoi davvero.
Una delle cose che volevo menzionare è, se hai intenzione di fare intestazioni fuori pagina,
non usare {display: none} o {visibility: hidden}.
Questi in realtà solo un po 'di confusione con il codice e rendono molto difficile per gli
screen reader o altre persone che guardano il tuo codice per vedere cosa sta succedendo.
All' inizio della lezione ho detto che il testo di collegamento significativo è
molto importante per
l'accessibilità perché gli screen reader possono trovare ed elencare tutti i link.
Ora, quello che potresti non renderti conto è che il modo in cui questi link vengono visualizzati
potrebbe non essere nel modo che ti aspetti.
Quindi, potrebbero essere fuori contesto.
Potresti essere in grado di accedervi solo tramite tabulazioni o
possono essere presentati in un elenco.
Quindi, vuoi davvero evitare di usare cose come fare clic qui, leggere questo e altro ancora.
La ragione
è che forse l'unico contesto che alcune persone ottengono per andare ai link.
Inoltre, non utilizzare l'URL come descrizione del link.
È abbastanza comune andare su un sito e puoi vedere fare clic qui, e
hanno l'intero URL, www.umich.edu/etc.
Può sembrare molto descrittivo, ma se devi ascoltare la descrizione,
può essere molto confuso.
Invece, a meno che tu non abbia un URL molto breve, vai avanti e
usa una sorta di descrizione testuale.
Quindi, solo per rivedere, pensiamo a quello che abbiamo imparato oggi.
Quando finisci di creare la tua pagina, non è sufficiente per avere un bell'aspetto.
Devi pensare a quanto sia facile navigare nella tua pagina.
Pensa a cosa succederebbe se i colori non fossero presenti, o
se qualcuno potesse navigare alla tua pagina solo con il mouse.
Quindi voglio che tu sia molto veloce quello di cui sto parlando qui.
Ecco una mia vecchia pagina e, in fondo, ho l'Università del Michigan.
Voglio solo mostrarti cosa succede quando tolgo lo stile.
La pagina ora, non riesci nemmeno a vedere il testo.
Queste sono le piccole cose che non noteresti mai
a meno che tu non abbia controllato la tua pagina sia con e senza stile.
Quindi, quando pianifichi la tua pagina, assicurati di pianificare per tutti.
Fare grande uso di titoli.
Fare grande uso del testo del link.
E assicurati di fornire alle persone gli strumenti necessari per navigare
correttamente nella tua pagina.
Grazie.