Categories
Uncategorized

Ottimizzare la navigazione da tastiera mediante tabIndex e ARIA

TheMummichogblog è un partecipante al Amazon Services LLC Associates programma, un programma di affiliazione pubblicitario progettato per fornire un mezzo per siti per guadagnare tariffe pubblicitarie con la pubblicità e il link al amazon.com. Amazon, il logo di Amazon, AmazonSupply, e il logo AmazonSupply sono marchi di Amazon.com, Inc. o delle sue affiliate.

Ottimizzare la navigazione da tastiera mediante tabIndex e ARIA
Uno studio di micro-caso sulla realizzazione in lista articolo tastiera-amichevole per una pubblicazione online

Il più veloce l’utente può navigare l’interfaccia utente, meglio è. Il più veloce si può ottenere ai contenuti di cui hanno bisogno, meglio è. Pertanto, i meno passaggi che devono passare attraverso, il più efficiente la loro esperienza con l’interfaccia utente sarà. E questo vale per tabulazione tastiera, anche: i meno linguette le esigenze degli utenti di fermarsi a durante la navigazione, più velocemente si sono per arrivare al punto in cui hanno bisogno. Il modo in cui vi segnalo il nostro contenuto ha un effetto diretto sul l’esperienza dell’utente. Ma siamo in grado di migliorare drasticamente la UX ottimizzando in particolare il margine di profitto per gli utenti della tastiera.

--------------------------------------------------------------------------------------------------



Gettando in lui ogni vostra preoccupazione, perché egli ha cura di voi.


Subscribe By E-mail:

Enter your email address:

Delivered by FeedBurner



----------------------------------------------------------------------------------------------

Clic. Rubinetti. Tabs. Passi.
Se c’è una cosa che lavorare con i designer UX mi ha insegnato è che meno passaggi le esigenze degli utenti di passare attraverso il loro viaggio, meglio è. Come tali, essi di solito progettano esperienze facendo in modo meno clic sono necessari per ottenere l’utente alla fine del loro viaggio. Come progettista, quando si parla di “passi” e “click”, il mio cervello non può fare a meno di pensare di rubinetti e le schede, anche. Poiché un utente potrebbe interagirà con l’interfaccia utente in diversi modi, non solo utilizzando un mouse. Rubinetti sono praticamente toccano equivalenti di scatti, quindi immagino l’esperienza sarebbe come ottimizzato per quelli come per senza contatto. Ma l’esperienza per gli utenti della tastiera è di solito un più di un po ‘diverso.

Come progettista, il mio compito è quello di pesare e fornire consulenza e raccomandazioni per assicurarsi che le opere di design di interfaccia utente per gli utenti in diversi contesti. Questo vuol dire che ho fornire un feedback per assicurarsi che le esperienze degli utenti della tastiera, tra gli altri, sono anche considerati. I disegni sono spesso ottimizzato se e quando necessario in base alle nostre discussioni UX. Ma spesso, noi gli sviluppatori possono apportare ottimizzazioni e miglioramenti per l’accessibilità e UX che non richiedono discussioni e / o permessi di progettazione. E quando possiamo, dovremmo.

Un utente navigare e interagire con un’interfaccia utente utilizzando un mouse di solito può muoversi attraverso la pagina con poco sforzo – hanno letteralmente spostare il cursore dove vogliono. Il cursore del mouse “si libra” sopra una pagina, per così dire. Se non si utilizza un disegno anti-modello, ci sono raramente eventuali ostacoli sulla loro strada, perché la maggior parte i disegni sono di solito ottimizzati per le loro interazioni. Non importa quanti link ci sono sulla pagina, si può andare direttamente al link che vogliono, fare clic su di esso, e andare avanti.

Un utente di tastiera, d’altra parte, non si può andare da nessuna parte senza passare attraverso una serie di punti di tabulazione impostato per loro. Se fossero una persona Infront di scale in piedi, un utente della tastiera ha bisogno di salire le scale per raggiungere la loro destinazione (rispetto ad un utente del mouse che indossa un paio di scarpe volanti magiche o usa un Hoverboard di volare su per le scale 😅). Il più passi per le scale hanno, più passaggi di cui hanno bisogno per salire, il più a lungo il loro viaggio, e il più ingombrante può essere. Non ci sono scorciatoie per andare dove vogliono in modo più rapido ed efficiente … a meno che fornire loro con le scorciatoie. Io elaborare su che in un altro post. In questo post, io voglio parlare di markup e di come a volte può essere ottimizzato per la navigazione da tastiera più efficiente. A titolo di esempio, voglio parlare in lista articolo circa.

Blog, riviste online e altre pubblicazioni saranno normalmente visualizzare gli elenchi di articoli o post. Navigando in tali pubblicazioni, spesso noterete un modello familiare nella maggior parte di tali elenchi: una voce di post ha un’anatomia tipica normalmente composto da:

una miniatura,
un titolo del post,
nome dell’autore,
tag postali,
un estratto o descrizione,
e un “read more” di collegamento,
dare o prendere uno o più elementi. Così il post potrebbe includere tutti gli elementi di cui sopra meno la miniatura, per esempio. Oppure potrebbe essere composta da una miniatura, un titolo, e solo una descrizione. Si potrebbe anche includere un link alla sezione commenti sulla pagina articolo completo. E così via.

In genere, la miniatura, titolo del post e Leggi tutto collegare tutte link alla stessa pagina: la pagina articolo completo, mentre il nome dell’autore e la lista dei tag inviano alle loro pagine corrispondenti. Se sei un utente vedente mouse e si desidera leggere il post completo, si fa clic su entrambi i Thumnail, il titolo o il Per saperne di più link per arrivarci. Si può anche essere in grado di fare clic su tutto il post, se è contrassegnato per essa.

Ma come funziona questo post anatomia influenzare un utente tastiera?

La navigazione di un elenco dei posti con una tastiera
Se si utilizza una tastiera per navigare una pagina contenente un elenco tipico di tutti i messaggi, si noterà che a volte è necessario alla scheda tramite lo stesso collegamento di due o tre volte di fila. Per dimostrare, ho registrato l’exeprience di tabulazione attraverso il New York Times, Medio e homepage Forbes:

Messaggi sui Forbes homepage contengono tre link per messaggio: la la miniatura, il titolo del post, e una versione solo-icona di undi più Scopri di” collegamento. Cliccando su uno di questi link porta l’utente alla pagina di articolo completo corrispondente a questo post. Così, un utente naviga usando la tastiera ha bisogno praticamente alla scheda attraverso lo stesso link per tre volte di fila per continuare la navigazione verso il prossimo post e qualsiasi contenuto viene dopo. I più posti ci sono, più lungo è il viaggio tabulazione sarà.
La homepage del New York Times dispone di un elenco di posti, ciascuna contenente due focusable elementi / links: una miniatura, e un link che comprende il testo sia per il titolo e la descrizione posta. Entrambi questi collegamenti prendono l’utente alla pagina di articolo completo.
Nella home page di Media, ogni post è costituito da cinque collegamenti, tre dei quali link alla pagina articolo completo: la miniatura posta, il titolo e la descrizione posta. Tabulazione attraverso questi messaggi significa le esigenze degli utenti a scheda attraverso lo stesso collegamento tre volte di seguito.
Se si utilizza una tastiera molto, probabilmente inizia a notare come ridondante sia alla scheda tramite lo stesso collegamento più volte di fila. Se hai intenzione di arrivare a una sezione che viene dopo le liste articolo su quella pagina, è necessario scheda un bel po ‘prima di arrivare lì.

Quando un elenco dei posti è stato progettato come con tale struttura una in mente, di solito è ottimizzato per un utente del mouse / tocco avvistato. Tale utente avrebbe una generosa raccolta di elementi per fare clic o toccare, che portano tutti alla stessa pagina che probabilmente alla fine vogliono visitare.

Ma questo progetto non è ottimizzato per gli utenti della tastiera. Quando un utente tastiera esigenze alla scheda attraverso lo stesso collegamento due o tre volte di seguito vengono rallentati perché il loro cammino diventa letteralmente 200% o 300% più lunga che potrebbe / dovrebbe essere.

A seconda della struttura posta e l’anatomia, a volte possiamo migliorare drasticamente l’esperienza degli utenti della tastiera con il minimo sforzo dev.

Ottimizzare la navigazione da tastiera mediante tabIndex e aria-nascosto
Lo scorso autunno, ho avuto l’opportunità di lavorare su un imminente restyling di una pubblicazione online. Sono stato assunto per costruire un nuovo marchio fondazione front-end per la progettazione. Ho messo un sacco di enfasi sulla assicurandosi che il nuovo design è implementato come accessibilmente e inclusivo possibile. Così, naturalmente, ho voluto assicurarsi che l’esperienza è ottimizzato per gli utenti di tastiere pure.

Essendo una pubblicazione online, contiene centinaia di articoli, e tali articoli vengono visualizzati come un elenco di messaggi su home page e le altre pagine del sito.

Uno screenshot di tre voci di post sul blog con una struttura simile a quella menzionato in precedenza.
Ci sono stati più di una dozzina di voci articolo sulla homepage della pubblicazione. Ogni voce consisteva in una miniatura dell’immagine (per lo più decorational), un titolo, il nome dell’autore, una descrizione (senza link), ed un saperne di più collegamento. Questo significa che ogni voce conteneva tre collegamenti alla pagina articolo completo, e un link alla pagina dell’autore.
Nel processo di test di un componente nella parte inferiore della home page per l’accessibilità, mi sono reso conto che la tabulazione attraverso la pagina per arrivare a tale componente è stato più lungo di quanto mi piacerebbe che, a causa del gran numero di voci pubblicare sulla pagina. Certo, questa esperienza tabulazione è la tipica esperienza su qualsiasi e tutti i siti Web simili che abbia mai visitato. Ma proprio perché è l’esperienza tipica, non significa che non possa essere migliorato.

Dopo una lunga discussione su usabilità e accessibilità, ho fatto una piccola aggiunta per il markup che migliora la navigazione tramite tastiera, riducendo il numero di link tabbable. Il numero di link non cambia; la tabbability di un collegamento fa. Ciò significa che un utente che navigano usando una tastiera sarebbe solo scheda attraverso un link alla pagina articolo completo in ogni post invece di tre, rendendo così l’esperienza della tastiera più veloce ed efficiente nel complesso.

L’implementazione è semplice:

Impedire un collegamento sia schede utilizzando tabindex = “-1”, e
nascondere detto collegamento da lettori di schermo usando aria-hidden = “true”, perché non si vuole un lettore di schermo per esporre un link che l’utente non sarà in grado di interagire con.
Ho applicato questo per le immagini in miniatura perché non sono utilizzati per trasmettere tutte le informazioni particolarmente rilevanti in una voce (che sono più simili a decorational foto di copertina), e alle Leggi di più collegamenti. Solo il titolo del post rimane tabbable, così come il link alla pagina dell’autore. Così, invece di avere quattro punti di tabulazione in ciascuna voce, l’utente ha ora due. Così tabulazione attraverso il lungo elenco dei posti sta per essere due volte più veloce di quello che una tipica esperienza sarebbe stato.

Il markup per ogni voce articolo sembrava qualcosa di simile a questo:







Inspirational Sito della settimana: Dean Bradshaw h2>



Div>


svg>

Div>
Article>
Di seguito sono due codepens dal vivo che si può scheda attraverso l’utilizzo di una tastiera per vedere la differenza tra l’esperienza tipica di default e l’esperienza con i collegamenti saltati:

Una dimensione non va bene per tutti.
Non tutte le inserzioni articolo sono uguali. Negli esempi precedenti, non c’erano molti collegamenti tra ciascuno dei consecutivi completi collegamenti di pagina articolo. In ciascuno degli esempi, estratto del post è breve e non contiene alcun link, e non ci sono liste di tag seguenti il ​​titolo del post e separano il titolo dal Read More collegamento.

A seconda di come si imposta il tuo CMS o SSG per generare estratti, potrebbero essere generati come testo semplice o full markup. Ad esempio, su questo blog, i brani sono generati come testo normale, in modo che non contengono link. Su codrops, i brani non sono realmente estratti – sono descrizioni personalizzate di un articolo, quindi, in base alla progettazione, inoltre non contengono link. Ma non tutti inviare estratti o descrizioni vengono senza collegamenti.

Quando ci sono diversi collegamenti tra il titolo e il Per saperne di più link, diventa importante per l’utente sia in grado di utilizzare il Read More collegamento. Per dimostrare, ho registrato il processo di tabulazione attraverso il sito Web di Lea Verou, dove lei mostra un post estratto più lungo per l’ingresso e che contiene un bel po ‘di link in alcuni casi.

Tabulazione attraverso una voce di post sul sito Web di Lea Verou. Se il collegamento Continue Reading non ci fosse sul post di Lea, un utente avrebbe bisogno della tastiera alla scheda tutta la strada per il titolo per visitare la pagina articolo completo. In tal caso, un collegamento Per saperne di più non fornire un valore e non deve essere disattivato.
Perché ci sono un bel po ‘di link dopo il titolo del post in ogni voce, il Continue Reading collegamento in messaggi di Lea è essenziale per l’esperienza della tastiera. Il collegamento è un collegamento alla pagina completo del articolo ora; se non fosse stato lì, o se fosse stato saltato, l’utente avrebbe bisogno di scheda tutto indietro la strada fino al titolo del post di visitare l’articolo completo, che sarebbe stato assurdo. Questo è un esempio di quando non si desidera utilizzare tabindex e ARIA di saltare su un collegamento, perché peggiorerebbe l’esperienza dell’utente.

Qualche anno fa, ho preso un approccio diverso per l’attuazione voci pubblicare quando ho costruito fondazione front-end di Smashing Magazine. I posti sono stati progettati per essere “carte”, e le carte vengono con le loro proprie considerazioni di implementazione che ho documentato nel mio precedente post su collegamenti nidificati.

Ogni disegno viene con le proprie considerazioni di usabilità che devono essere presi in considerazione. Al fine di migliorare l’esperienza, è necessario testare il progetto utilizzando una tastiera, e con utenti reali se possibile – in genere possono fornire un sacco di intuizione che noi progettisti / sviluppatori potrebbero perdere.

Per riassumere:
Non tutti gli utenti utilizzano un mouse per navigare le pagine.
Il modo in cui si contrassegna i vostri elementi ha un effetto diretto su come le persone interagiscono con loro.
I link sono attivabile per impostazione predefinita, ma potrebbe avere un senso di saltare alcuni collegamenti se il disegno e l’esperienza utente lo permette.
Una regola buona di pollice per casi simili è che se si dispone di più collegamenti consecutivi alla stessa pagina, non v’è probabilmente la possibilità di migliorare la navigazione da tastiera saltando alcuni di questi collegamenti per ridurre il numero di tabulazione a uno. La scheda meno ferma, meglio, purché non peggiorare o compromesso su altri aspetti della fruibilità.
Non esiste una regola una unica. Un approccio potrebbe funzionare per un disegno, ma non per un altro.
E, ancora una volta: ogni disegno viene con le sue sfide e le considerazioni. Prendere in considerazione quelli, pesare le opzioni, test con utenti reali, utilizzare una tastiera e ottimizzazioni fanno quando e dove necessario. Alla fine della giornata, dovrebbe sempre essere di circa l’esperienza dell’utente.

www.sarasoueidan.com/blog/keyboard-friendlier-article-listings/

Amazon e il logo di Amazon sono marchi di Amazon.com, Inc., o delle sue affiliate.