Qual è lo scopo dell'attributo "role" in HTML?

La maggior parte dei ruoli che vedete sono stati definiti come parte di ARIA 1.0, e poi successivamente incorporati in HTML5. Alcuni dei nuovi elementi HTML5 (dialog, main, ecc.) sono addirittura basati sui ruoli ARIA originali.

http://www.w3.org/TR/wai-aria/

Ci sono due ragioni principali per usare i ruoli in aggiunta al tuo elemento semantico nativo.

Ragione #1. Sovrascrivere il ruolo quando nessun elemento della lingua ospite è appropriato o, per varie ragioni, è stato usato un elemento semanticamente meno appropriato.

In questo esempio, è stato usato un link, anche se la funzionalità risultante è più simile a un pulsante che a un link di navigazione.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

I lettori di schermo lo sentiranno come un pulsante (al contrario di un link), e si può usare un selettore di attributi CSS per evitare la class-itis e la div-itis.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Ragione #2. Backup del ruolo di un elemento nativo, per supportare i browser che hanno implementato il ruolo ARIA ma non hanno ancora implementato il ruolo dell'elemento nativo.

Per esempio, il ruolo "main" è stato supportato nei browser per molti anni, ma è un'aggiunta relativamente recente ad HTML5, quindi molti browser non supportano ancora la semantica per ``.

…

Questo è tecnicamente ridondante, ma aiuta alcuni utenti e non ne danneggia nessuno. In pochi anni, questa tecnica diventerà probabilmente non necessaria.

Hai anche scritto: Vedo che alcune persone se ne inventano una propria. È permesso o è un uso corretto dell'attributo role?

Questo'è un uso valido dell'attributo a meno che un ruolo reale non sia incluso. I browser applicheranno il primo ruolo riconosciuto nella lista dei token.

<span role="foo link note bar">...</a>

Dalla lista, solo link e note sono ruoli validi, e quindi il ruolo link sarà applicato perché viene prima. Se usi ruoli personalizzati, assicurati che non vadano in conflitto con nessun ruolo definito in ARIA o nel linguaggio ospite che stai usando (HTML, SVG, MathML, ecc.)

Da quanto ho capito, i ruoli erano inizialmente definiti da XHTML ma sono stati deprecati. Tuttavia, ora sono definiti da HTML 5, vedi qui: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

Lo scopo dell'attributo role è di identificare al software di analisi l'esatta funzione di un elemento (e dei suoi figli) come parte di un'applicazione web. Questo è principalmente una cosa di accessibilità per i lettori di schermo, ma posso anche vederlo come utile per i browser incorporati e gli screen scrapers. Per essere utile al client HTML insolito, l'attributo deve essere impostato su uno dei ruoli della specifica che ho linkato. Se ne crei uno tuo, questa 'futura'funzionalità non può funzionare - un commento sarebbe meglio.

Pratiche qui: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

Questo attributo di ruolo è necessario?

Risposta: Sì.

• L'attributo role è necessario per supportare le Accessible Rich Internet Applications (WAI-ARIA) per definire i ruoli nei linguaggi basati su XML, quando i linguaggi non definiscono il proprio attributo role.
• Sebbene questa sia la ragione per cui l'attributo role è pubblicato dal Protocols and Formats Working Group, l'attributo ha anche casi d'uso più generali.

Esso fornisce:

• Accessibilità
• Adattamento del dispositivo
• Elaborazione lato server
• Descrizione di dati complessi,...ecc.