Menu Chiudi

Lighthouse, Accessibility: Migliorare il tuo SEO

100% su lighthouse

Accessibility, come migliorare le prestazioni del tuo sito WordPress seguendo i consigli di Lighthouse.

Abbiamo già visto l’articolo che descriveva come Migliorare il SEO a partire dall’ottimizzazione delle prestazioni e dava una infarinatura su Lighthouse. Andiamo ora a vedere come si migliorano i parametri per raggiungere il 100% su Lighthouse.

Lighthouse: Accessibility

Il settore di Lighthouse “Accessibility” identifica sopratutto errori legati alla fruibilità dei siti da parte di persone con disabilità e/o dai sistemi per aiutarle. Google investe tanto per aiutare gli utenti non vedenti, non udenti, ipovedenti o più in generale disabili. Gli errori segnalati da Lighthouse “accessibility” puntano a far costruire siti web fruibili a tutti.

Se sei finito su questa pagina è perché probabilmente hai visualizzato uno degli errori seguenti. Le scritte di errore che possono apparire ad oggi sono ben 52. Suddivise in gruppi.
I link rimandano alla documentazione di Google in inglese.

Navigation (Navigazione)

[accesskey] values are not unique

Gli accesskey consentono di attivare le scorciatoie da tastiera, l’errore si genera quando due accesskey hanno lo stesso valore. Due accesskey collegati a link a due pagine diverse con lo stesso valore danno sicuramente problemi mandando ad una delle due pagine linkate ma non all’altra.

The page does not contain a heading, skip link, or landmark region

L’utilizzo degli elementi segnalati nell’errore da Lighthouse permette un più agevole utilizzo del sito da chi naviga senza mouse o per gli screen reader (software per la lettura dello schermo).

[id] attributes on active, focusable elements are not unique

Non bisogna usare attributi [id] duplicati su alcuni elementi (<button><select>, <textarea>…) per evitare problemi alle tecnologie assistive.

Heading elements are not in a sequentially-descending order

Anche questo tipo di errore è legato alle tecnologie assistive e di supporto ai disabili. Gli elementi di intestazione dovrebbero essere posizionati in maniera sequenziale. Il classico errore è quando metto un <h3> dopo un <h1> senza mettere <h2>. Alcuni screen reader potrebbero generare errore.

Some elements have a [tabindex] value greater than 0

Seppure si possa tecnicamente fare, impostare il [tabindex] con valori più grandi di 0 potrebbe portare dei problemi agli utilizzatori di tecnologie assistive.

ARIA

ARIA, anche detto WAI-ARIA è l’acronimo per Web Accessibility Initiative-Accessible Rich Internet Applications è un insieme di indicazioni per migliorare l’accessibilità dei siti web.

[aria-*] attributes do not match their roles

Gli attributi [aria-*] dovrebbero sempre corrispondere ai loro ruoli.

[aria-hidden="true"] is present on the document <body>

L’attributo [aria-hidden=”true”] fa si che screen reader ed altre tecnologie assistive non riescano a vedere la pagina web dove è presente.

[aria-hidden="true"] elements contain focusable descendants

Mettendo [aria-hidden=”true”] ad un elemento che è comunque attivabile lo rendo invisibile ai lettori di schermo, ma l’elemento rimane cliccabile per la navigazione da tastiera, creando un problema agli utenti.

ARIA input fields do not have accessible names

Questo errore viene segnalato quando gli attributi ARIA non hanno un nome, è necessario mettere un nome ad ogni oggetto, ARIA per far comprendere ai lettori di schermo a cosa servono. Gli oggetti integrati in HTML invece non ne hanno bisogno (button, radio…).

[role]s do not have all required [aria-*] attributes

Alcuni [role] (ruoli) non hanno gli attributi [aria-*] che dovrebbero avere per essere correttamente interpretati dai lettori di schermo.

Tutti questi errori sono simili tra di loro e non facili da distinguere, spesso sono collegati

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children

Alcuni ruoli ARIA richiedono specifici ruoli figlio. Se questi mancano Lighthouse segnala questo codice di errore.

[role]s are not contained by their required parent element

Questo problema è il contrario del precedente, in questo caso appaiono specifici ruoli figlio ma non sono contenuti nell’appropriato ruolo genitore.

[role] values are not valid

I valori nei ruoli non sono validi, controllare se avete scritto correttamente, a volte basta un errore di sintassi perché questo messaggio venga visualizzato.

ARIA toggle fields do not have accessible names

I campi toggle di ARIA non hanno un nome accessibile, è probabile ci sia un errore di sintassi nel nome.

[aria-*] attributes do not have valid values

Gli attributi [aria-*] non hanno un valore valido. Il valore dell’attributo deve essere specificato: true, false, etc.

[aria-*] attributes are not valid or misspelled

L’attributo [aria-*] presenta un errore di sintassi oppure non è valido.

ARIA IDs are not unique

Gli attributi ARIA devono avere ID unici. Questo per non generare errori nei lettori di schermo che segnalerebbero la presenza del solo primo oggetto con lo stesso ID.

Names and labels (Nomi ed etichette)

Buttons do not have an accessible name

Un tasto senza un nome accessibile non consente a chi utilizza screen reader di comprendere a cosa serva il bottone. Si consiglia di dare sempre un nome agli elementi bottone (ok, invia, chiudi, annulla…)

Document doesn’t have a <title> element

Il <title> è un elemento fondamentale per una pagina, consente ai motori di ricerca di indicizzare correttamente una pagina e agli utenti di capire cosa quella pagina contiene ancora prima di cliccarci sopra. Il titolo compare in blu quando facciamo una ricerca su Google. Dovrebbe essere lungo al massimo 60 caratteri. Deve essere coerente con il contenuto della pagina.
La presenza di questo elemento favorisce inoltre i software assistivi, Lighthouse accessibility incentiva questi comportamenti.

Form fields have multiple labels

Gli elementi <label> sono un modo comune per associare nomi ai controlli. Se per sbaglio associamo più <label> ad un singolo controllo si possono creare problemi ai browser ed alle tecnologie assistive.

<frame> or <iframe> elements do not have a title

Ancora una volta errore a favore di tecnologie assistive e screen reader. I lettori di schermo navigano facilmente tra i frame, se questi non hanno un titolo descrittivo è difficile per loro comprenderne il contenuto.

Questi che seguono sono banali, spesso facili da risolvere ma molto importanti.

Image elements do not have [alt] attributes

Le immagini non hanno un attributo [alt], o questo è vuoto. Nei siti WordPress il secondo caso è relativamente facile da risolvere, basta andare nella galleria media e riempire il campo “testo alternativo” (Alternative text). Il primo impossibile se si caricano le immagini dalla galleria. Attenzione, fatta questa operazione le immagini vanno ricaricate per avere il campo alt completo.

<input type="image"> elements do not have [alt] text

Nel caso si decida di usare un’immagine come tasto <input> inserire il testo [alt] favorisce la comprensione dello scopo del pulsante.

Form elements do not have associated labels

Le etichette sui form fanno in modo che i lettori di schermo o altre tecnologie di assistenza per i diversamente abili funzionino correttamente.

Links do not have a discernible name

I link testuali sono comprensibili, unici e migliorano l’esperienza di navigazione anche con i lettori di schermo ed altre tecnologie di aiuto ai diversamente abili.

<object> elements do not have [alt] text

Gli screen reader ed altre tecnologie di assistenza agli ipovedenti non riescono a tradurre un oggetto non testuale. Mettere un riferimento testuale [alt] (testo alternativo) per definire ogni elemento <object> aiuta le tecnologie ausiliarie a fare meglio il loro lavoro.

Contrast (Contrasto)

Background and foreground colors do not have a sufficient contrast ratio

Questo messaggio di errore appare quando il contrasto tra i testi del mio sito e il loro sfondo non ha un contrasto sufficiente e potrebbe creare difficoltà agli ipovedenti. State attenti anche al colore di rollover dei link. Si risolve andando ad agire sui fogli di stile del vostro sito, spesso (ma non sempre) editabili dal menù che modifica l’aspetto del tema nel backend di WordPress. Questo problema viene segnalato spesso da Lighthouse accessibility e si risolve facilmente. Google vuole scritte e sfondi molto contrastati, al bando scritte troppo chiare.

Tables and lists (Tabelle ed elenchi)

<dl>s do not contain only properly ordered <dt> and <dd> groups, <script>, or <template> elements

Serve per migliorare l’utilizzo dei lettori di schermo, <dl> (lista di definizione) contenere nel giusto ordine <dt> che indica il nome dell’oggetto e <dd> che invece ne indica la descrizione.

Definition list items are not wrapped in <dl> elements

Vedi sopra, in questo caso <dt> e <dd> non sono incorporati in un elemento <dl>.

Lists do not contain only <li> elements and script supporting elements (<script> and <template>)

In questo caso all’interno dei tag <ol> o <ul> che definiscono le liste ci dovrebbe essere un elemento <li> che definisce l’oggetto, invece non c’è, sostituito da altro. Possono però contenere elementi di tipo <script> e <template>.

List items (<li>) are not contained within <ul> or <ol> parent elements

Il tag <li> che contiene gli elementi di una lista dovrebbe essere contenuto all’interno di uno tra i due tag seguenti: <ol> (ordered list – lista numerata) o <ul> (unordered list – lista non numerata)

Ricordiamo che i parametri di lighthouse accessibility sono molto importanti per gli screen reader.

Presentational <table> elements do not avoid using <th><caption>, or the [summary] attribute

Le tabelle usate per disporre gli elementi non dovrebbero contenere i seguenti elementi: <th> o >caption> né l’attributo summary.

Cells in a <table> element that use the [headers] attribute refer to an element ID not found within the same table

Ogni cella di dati della tabella dovrebbe essere correlata alla corretta intestazione della tabella. Dovrebbe esserci soltanto un intestazione di tabella per ogni colonna.

<th> elements and elements with [role="columnheader"/"rowheader"] do not have data cells they describe

Questo errore di Lighthouse appare quando gli elementi <th> oppure quelli con [role=”columnheader”/”rowheader”] non hanno le celle di dati corrispondenti che descrivono.

Best practices (Migliori pratiche)

The document uses <meta http-equiv="refresh">

Il refresh consente alla pagina di ricaricarsi dopo un periodo di tempo specificato. La cosa è spesso fastidiosa e disorienta l’utente. Vivamente sconsigliato!

[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5

Il parametro user-scalable=”no” impedisce agli utenti di poter ingrandire il contenuto della pagina. Questa funzione è utile per poter leggere meglio il testo o per visualizzare meglio un’immagine troppo piccola. Anche questo messaggio va a supporto degli ipovedenti, ma aiuta anche a difendersi da cattivi programmatori o da siti realizzati quando ancora non c’erano i dispositivi mobile. Analogamente maximum-scale decide di quanto sia possibile ingrandire la visualizzazione del sito, Google richiede al minimo un fattore 5.

Audio and video (Audio e video)

<audio> elements are missing a <track> element with [kind="captions"]

Questo controllo è diventato obsoleto.

<video> elements do not contain a <track> element with [kind="captions"]

L’elemento <video> non contiene un elemento <track> (traccia) con [kind=”captions”]. Con captions si intendono i sottotitoli, utili alle persone non udenti.

<video> elements do not contain a <track> element with [kind="description"]

Come sopra ma qui è richiesta la presenza di [kind=”description”]. Indica le audio-descrizioni, utili ai non vedenti nelle parti dei filmati senza dialoghi per descrivere le cose visualizzate. Es.: se la scena di un film si svolge all’aperto, al chiuso, in una piazza, con quante persone, in che epoca, come sono vestite…

Internationalization and localization (Internazionalizzazione e localizzazionie)

<html> element does not have a [lang] attribute

È un messaggio che serve per aiutare le persone ipovedenti e che usano dei programmi Screen Reader per leggere il contenuto dello schermo. Impostare questo parametro fa si che lo screen reader capisca correttamente la lingua in uso ed utilizzi la corretta libreria per leggere le parole con la giusta pronuncia. Diversamente leggerebbe con la lingua preimpostata sul lettore. Ricordiamo sempre che Google mette un forte accento sulla Ligthouse accessibility.

<html> element does not have a valid value for its [lang] attribute

È legato all’errore precedente, in questo caso l’attributo lang è presente ma il valore indicato è scritto in maniera non corretta o è obsoleto e non riconoscibile dai programmi per leggere lo scherrmo.

[lang] attributes do not have a valid value

Simile ai problemi precedenti, in questo caso si riferisce alle pagine che potrebbero essere scritte in più lingue. Invita a specificare la variazione di lingua nelle diverse sezioni.

Additional items to manually check (Altre cose da testare manualmente su Lighthouse accessibility)

Tutti i controlli seguenti vanno testati manualmente, il software non riesce a testarli direttamente. Bene rispettarle per migliorare l’esperienza dell’utente e indirettamente il nostro SEO. Ricordati che per Google è fondamentale l’accessibilità e importante quinndi seguire i consigli di Lighthouse Accessibility.

The page has a logical tab order

La pagina ha un ordine di tabulazione logico.

Interactive controls are keyboard focusable

I controlli interattivi sono controllabili da tastiera.

Interactive elements indicate their purpose and state

Gli elementi interattivi indicano il loro scopo e stato.

The user’s focus is directed to new content added to the page

L’attenzione dell’utente è diretta ai nuovi contenuti aggiunti alla pagina.

User focus is not accidentally trapped in a region

L’attenzione dell’utente non viene accidentalmente concentrata in un punto della pagina.

Custom controls have associated labels

I controlli personalizzati hanno etichette associate.

Custom controls have ARIA roles

I controlli personalizzati hanno ruoli ARIA.

Visual order on the page follows DOM order

L’ordine visivo della pagina segue l’ordine DOM.

Offscreen content is hidden from assistive technology

Il contenuto fuori schermo è nascosto alla tecnologia assistiva.

HTML5 landmark elements are used to improve navigation

Gli elementi landmark di HTML5 vengono utilizzati per migliorare la navigazione.

Ti è piaciuto l’articolo Migliorare il SEO con Lighthouse, Accessibility? Lasciaci un commento o contattaci per maggiori informazioni.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *