{"id":133,"date":"2024-08-12T12:15:47","date_gmt":"2024-08-12T12:15:47","guid":{"rendered":"https:\/\/www.accessibilita.digital\/?p=133"},"modified":"2024-08-23T11:52:11","modified_gmt":"2024-08-23T11:52:11","slug":"come-usare-gli-attributi-aria-e-i-role","status":"publish","type":"post","link":"https:\/\/www.accessibilita.digital\/come-usare-gli-attributi-aria-e-i-role\/","title":{"rendered":"Come usare gli attributi ARIA e i role"},"content":{"rendered":"

Quando si parla di accessibilit\u00e0, \u00e8 molto utile comprendere l’uso degli attributi HTML<\/strong>.<\/p>\n\n

Attributi ARIA e uso dei role<\/h2>\n

Accessible Rich Internet Applications, o meglio noti come ARIA<\/a>, sono un insieme di attributi e ruoli che possono essere assegnati a determinati tag HTML e sono strettamente legat<\/b>i<\/b> all\u2019accessibilit\u00e0<\/b>.<\/p>\n

Role<\/h3>\n

Il \u201crole\u201d \u00e8 un attributo usato in alcuni tag HTML e pu\u00f2 essere utile per ridefinire il contesto d\u2019utilizzo di un tag, \u00e8 importante per\u00f2 non abusare di questo attributo<\/b>, perch\u00e9 alla lunga pu\u00f2 creare pi\u00f9 danni di ci\u00f2 che risolve.<\/p>\n

Ci tengo a riportare quanto presente sulla pagina MDN dedicata agli ARIA<\/a>:<\/p>\n

\"\"
MDN descrive gli ARIA come attributi opzionali e incoraggia l’uso dei tag HTML semantici corretti<\/figcaption><\/figure>\n

Molto spesso potremmo vedere il \u201crole\u201d usato per cambiare il significato ai \u201cdiv\u201d di una pagina, ma questo non \u00e8 l\u2019uso pi\u00f9 adatto<\/b>. \u00c8 fortemente raccomandato usare il tag appropriato<\/b> invece di usare il \u201crole\u201d.<\/p>\n

Ad esempio, invece di usare <div role=\u201dcomplementary\u201d> \u00e8 meglio usare il tag \u201caside\u201d corrispondente.<\/p>\n

L\u2019elenco dei vari \u201crole\u201d<\/b> \u00e8 disponibile anche su MDN: WAI-ARIA Roles<\/a><\/p>\n

In alcuni contesti, l\u2019uso pu\u00f2 essere effettivamente utile, ad esempio quando un elemento pu\u00f2 essere ambiguo<\/b>. Un caso adatto pu\u00f2 essere l\u2019uso del tag \u201chr\u201d che traccia una linea orizzontale (horizontal row<\/i>), al quale potremmo applicare il role<\/b>=\u201dpresentation<\/b>\u201d, che significa assegnargli una funzione di pura decorazione, in quanto questo role definisce che il tag perde qualsiasi semantica, e diventa come un semplice <div>.<\/p>\n

Approfondimento: MDN: ARIA presentation role<\/a><\/p>\n

Teniamo quindi presente che usare gli ARIA significa sovrascrivere il comportamento di default che il browser si aspetta,<\/b> e questo potrebbe creare alcuni problemi.<\/p>\n

Attributi ARIA nei tag HTML<\/h3>\n

Mentre mi permetto di sconsigliare l\u2019uso dei role quando possibile evitarlo<\/b>, gli attributi ARIA possono essere utili in diversi casi, anche se \u00e8 bene fare molta attenzione.<\/p>\n

Gli attributi pi\u00f9 noti<\/b> sono probabilmente \u201caria-label\u201d, \u201caria-labelledby\u201d, \u201caria-live\u201d, \u201caria-haspopup\u201d, \u201caria-expanded\u201d perch\u00e9 molto usati da Bootstrap e WordPress<\/b>, ma ve ne sono molti altri.<\/p>\n

Ad esempio, possiamo usare \u201caria-label\u201d<\/b> per definire il testo accessibile, o etichetta, di un elemento.<\/p>\n

Un uso molto comune, per incontrare le esigenze grafiche<\/b> nella realizzazione di un sito web accessibile, \u00e8 di usare un aria-label per il contenitore di navigazione (tag \u201cnav\u201d) che per motivi grafici non ha un titolo di riferimento:<\/p>\n

<nav aria-label=\u201dPrincipale\u201d><\/code><\/p>\n

In alternativa, una buona soluzione <\/b>pu\u00f2 essere questa:<\/p>\n

<nav aria-labelledby=\u201dlabel-1\u201d><h2 class=\u201dvisually-hidden\u201d id=\u201dlabel-1\u201d>Navigazione principale<\/h2><\/nav><\/code><\/p>\n

Nota: la classe CSS \u201cvisually-hidden\u201d viene usata da Bootstra<\/a>p 5<\/a> per nascondere visivamente un elemento, che rimane per\u00f2 disponibile alla lettura per i lettori di schermo e altre tecnologie. Un tempo, questa classe era conosciuta come \u201csr-only\u201d che stava per \u201cscreen readers only\u201d.<\/i><\/p>\n

Negli esempi, aria-label<\/i> indica il testo che le tecnologie assistive dovrebbero leggere<\/b>, mentre aria-labelledby<\/i> indica l\u2019ID di riferimento<\/b> al tag che contiene il testo. Da notare che nell\u2019aria-label non ripetiamo il termine \u201cNavigazione\u201d<\/b>, che dovrebbe gi\u00e0 venire letto dalle tecnologie assistive perch\u00e9 abbiamo usato il tag semantico <<\/b>nav><\/b><\/p>\n

Per unire le due cose, potremmo anche avere un aria-label<\/i> diverso rispetto al testo del tag h2<\/i>, ma senza dunque usare aria-labelledby<\/i> perch\u00e9 non avrebbe senso.<\/p>\n

L\u2019aria-labelledby <\/i>pu\u00f2 anche combinare pi\u00f9 elementi, separando gli ID con lo spazio<\/b>, come in questo caso:<\/p>\n

<h2 id=\u201dlabel-1\u201d>Come fare il tiramis\u00f9<\/h2>
\n<a href=\u201d#\u201d id=\u201dlink-1\u201d aria-labelledby=\u201dlink-1 label-1\u201d>Scopri<\/a><\/code><\/p>\n

La tecnologia assistiva dovrebbe leggere \u201cScopri come fare il tiramis\u00f9\u201d perch\u00e9 sono stati uniti i due testi tramite la concatenazione<\/b> dei \u201cnomi accessibili\u201d.<\/p>\n

Vi sono molti altri attributi<\/b> che \u00e8 bene conoscere, come i gi\u00e0 citati \u201caria-expanded\u201d e \u201caria-haspopup\u201d, e l\u2019uso corretto si pu\u00f2 apprendere solo con l\u2019esperienza<\/b>, premesso che non vi \u00e8 un solo uso corretto, ma dipende molto dal singolo caso. Il mio invito \u00e8 quello di testarli con strumenti come NVDA<\/b> o simili, e capire effettivamente come funzionano, guardando anche come vengono usati nei siti web gi\u00e0 accessibili.<\/p>\n

Spiegare ogni singolo attributo sarebbe superfluo, per questo rimando alla lista completa degli attributi ARIA: ARIA states and properties<\/a><\/p>\n

Leggi anche<\/span><\/h2>\n