Indice

role: ruoli WAI-ARIA

I ruoli ARIA forniscono un significato semantico al contenuto, consentendo ai lettori di schermo e ad altri strumenti di presentare e supportare l'interazione con l'oggetto in un modo coerente con le aspettative dell'utente su quel tipo di oggetto. I ruoli ARIA possono essere usati per descrivere elementi che non esistono nativamente in HTML o esistono ma non hanno ancora il pieno supporto del browser.

Per impostazione predefinita, molti elementi semantici in HTML hanno un ruolo; ad esempio, <input type="radio"> ha il ruolo "radio". Gli elementi non semantici in HTML non hanno un ruolo; <div> e <span> senza semantica aggiunta restituiscono null . L'attributo role può fornire semantica.

I ruoli ARIA vengono aggiunti agli elementi HTML utilizzando role="role type" , dove role type è il nome di un ruolo nella specifica ARIA. Alcuni ruoli richiedono l'inclusione di stati o proprietà ARIA associati; altri sono validi solo in associazione con altri ruoli.

Ad esempio, <ul role="tabpanel"> verrà annunciato come un "pannello a schede" dagli screen reader. Tuttavia, se il pannello a schede non dispone di schede nidificate, l'elemento con il ruolo di pannello a schede non è in realtà un pannello a schede e l'accessibilità è stata effettivamente influenzata negativamente.

Tipi di ruolo ARIA

Esistono 6 categorie di ruoli ARIA:

1. Ruoli della struttura del documento

I ruoli Struttura del documento vengono utilizzati per fornire una descrizione strutturale per una sezione di contenuto. La maggior parte di questi ruoli non dovrebbe più essere utilizzata poiché i browser ora supportano l'elemento HTML semantico con lo stesso significato. I ruoli senza equivalenti HTML, come i ruoli di presentazione, barra degli strumenti e descrizione comando, forniscono informazioni sulla struttura del documento alle tecnologie assistive come le utilità per la lettura dello schermo poiché i tag HTML nativi equivalenti non sono disponibili.

  • toolbar
  • tooltip
  • feed
  • math
  • presentation/none
  • note

Per la maggior parte dei ruoli della struttura del documento, sono disponibili e supportati elementi semantici equivalenti all'HTML. Evitare di utilizzare:

  • application
  • article (usa invece <article>)
  • cell (usa invece <td>)
  • columnheader (usa invece <th scope="col">)
  • definition (usa invece <dfn>)
  • directory
  • document
  • figure (usa invece l'elemento <figure>)
  • group
  • heading (usa gli elementi <h1-h6>)
  • img (usa invece <img> o <picture>)
  • list (usa invece <ul> o <ol>)
  • listitem (usa invece <li>)
  • meter (usa invece <meter>)
  • row (usa invece <tr> con <table>)
  • rowgroup (usa invece <thead>, <tfoot> e <tbody>)
  • rowheader (usa invece <th scope="row">)
  • separator (usa invece <hr>)
  • table (usa invece <table>)
  • term (usa invece <dfn>)

Questi e associationlist, associationlistitemkey, associationlistitemvalue, blockquote, caption, code, deletion, emphasis, insertion, paragraph, strong, subscript, superscript, e time sono inclusi per completezza, ma nella maggior parte dei casi sono raramente, se non mai, utili.

2. Ruoli del widget

I vari ruoli del widget vengono utilizzati per definire schemi interattivi comuni. Analogamente ai ruoli della struttura del documento, alcuni di questi ruoli duplicano la semantica degli elementi HTML nativi che sono ben supportati e non dovrebbero essere utilizzati. La differenza tra i due elenchi è che, in genere, i ruoli del widget richiedono l'interazione JavaScript e i ruoli della struttura del documento non necessariamente.

  • scrollbar
  • searchbox
  • separator
  • slider
  • spinbutton
  • switch
  • tab
  • tabpanel
  • treeitem

Evita di usare button , checkbox , gridcell , link , menuitem , menuitemcheckbox , menuitemradio , option , progressbar , radio e textbox, che abbiamo incluso per completezza. Per la maggior parte, sono disponibili e supportati equivalenti semantici con interattività accessibile. Per ulteriori informazioni, vedere la documentazione del singolo ruolo.

3. Ruoli fondamentali

I ruoli di riferimento forniscono un modo per identificare l'organizzazione e la struttura di una pagina web. Classificando ed etichettando le sezioni di una pagina, le informazioni strutturali trasmesse visivamente attraverso il layout sono rappresentate programmaticamente. Le utilità per la lettura dello schermo utilizzano ruoli di riferimento per fornire la navigazione tramite tastiera a sezioni importanti di una pagina. Usali con parsimonia. Troppi ruoli di riferimento creano "disturbo" negli screen reader, rendendo difficile la comprensione del layout generale della pagina.

  • banner (<header>)
  • complementary (<aside>)
  • contentinfo (<footer>)
  • form (<form>)
  • main (<main>)
  • navigation (<nav>)
  • region (<section>)
  • search

4. Ruoli della regione attiva

I ruoli della regione attiva vengono utilizzati per definire elementi con contenuto che verrà modificato dinamicamente. Gli utenti vedenti possono vedere i cambiamenti dinamici quando sono visivamente evidenti. Questi ruoli aiutano gli utenti ipovedenti e non vedenti a sapere se il contenuto è stato aggiornato. Le tecnologie assistive, come i lettori di schermo, possono essere utilizzate per annunciare modifiche dinamiche al contenuto:

  • alert
  • log
  • marquee
  • status
  • timer

5. Ruoli della finestra

I ruoli della finestra definiscono le finestre secondarie della finestra del documento principale, all'interno della stessa finestra, come le finestre di dialogo modali a comparsa:

  • alertdialog
  • dialog

6. Ruoli astratti

I ruoli astratti sono destinati all'uso da parte dei browser solo per organizzare e semplificare un documento. Non dovrebbero essere usati dagli sviluppatori che scrivono markup HTML. Ciò non comporterà la trasmissione di informazioni significative alle tecnologie assistive o agli utenti.

Evita di utilizzare command, composite, input, landmark, range, roletype, section, sectionhead, select. structure. widget e window.