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

Continuo a vedere gli attributi di ruolo nel lavoro di alcune persone. Lo uso anche io, ma non sono sicuro del suo effetto.

Per esempio:

<header id="header" role="banner">
    Header stuff in here
</header>

O:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

O:

<section id="main" role="main">
     Main content stuff in here
</section>

Questo attributo di ruolo è necessario?

Questo attributo è migliore per la semantica?

Migliora la SEO?

Un elenco di ruoli può essere trovato qui , ma vedo che alcune persone si inventano da sole. È consentito o un uso corretto dell'attributo ruolo?

Qualche idea su questo?

La maggior parte dei ruoli che vedi sono stati definiti come parte di ARIA 1.0 e successivamente incorporati in HTML5. Alcuni dei nuovi elementi HTML5 (finestra di dialogo, principale, ecc.) Sono persino basati sui ruoli ARIA originali.

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

Esistono due motivi principali per utilizzare i ruoli oltre all'elemento semantico nativo.

Motivo n. 1. Sostituzione del ruolo in cui nessun elemento della lingua host è appropriato o, per vari motivi, è stato utilizzato un elemento meno semanticamente appropriato.

In questo esempio, è stato utilizzato un collegamento, anche se la funzionalità risultante è più simile a un pulsante rispetto a un collegamento di navigazione.

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

Gli screen reader sentiranno questo come un pulsante (anziché un collegamento) e puoi usare un selettore di attributi CSS per evitare class-itis e div-itis.

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

Motivo n. 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.

Ad esempio, il ruolo "principale" è stato supportato nei browser per molti anni, ma è un'aggiunta relativamente recente a HTML5, quindi molti browser non supportano ancora la semantica <main>.

<main role="main">…</main>

Questo è tecnicamente ridondante, ma aiuta alcuni utenti e non ne danneggia nessuno. Tra qualche anno, questa tecnica diventerà probabilmente superflua.

Hai anche scritto:

Vedo che alcune persone si inventano da sole. È consentito o un uso corretto dell'attributo ruolo?

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

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

Fuori dall'elenco, solo linke notesono ruoli validi, quindi il ruolo di collegamento verrà applicato perché viene prima. Se usi ruoli personalizzati, assicurati che non siano in conflitto con nessun ruolo definito in ARIA o nella lingua host che stai utilizzando (HTML, SVG, MathML, ecc.)

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

Lo scopo dell'attributo ruolo è identificare nel software di analisi l'esatta funzione di un elemento (e dei suoi figli) come parte di un'applicazione web. Questo è principalmente come una cosa di accessibilità per gli screen reader, ma posso anche vederlo come utile per i browser incorporati e gli screen scraper. Per essere utile al client HTML insolito, l'attributo deve essere impostato su uno dei ruoli dalla specifica che ho collegato. Se crei la tua, questa funzionalità "futura" 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 ruolo è necessario per supportare le applicazioni Internet Rich Accessible ( WAI-ARIA ) per definire i ruoli nelle lingue basate su XML, quando le lingue non definiscono il proprio attributo ruolo.
• Sebbene questo sia il motivo per cui l'attributo del ruolo è pubblicato dal gruppo di lavoro Protocolli e formati , l'attributo ha anche casi d'uso più generali.

Ti fornisce:

• Accessibilità
• Adattamento del dispositivo
• Elaborazione lato server
• Descrizione complessa dei dati, ... ecc.

Mi rendo conto che questa è una vecchia domanda, ma un'altra possibile considerazione a seconda dei tuoi esatti requisiti è che la convalida su https://validator.w3.org/ generi avvisi come segue:

Avviso: il ruolo del modulo non è necessario per il modulo dell'elemento.

L'attributo del ruolo migliora principalmente l'accessibilità per le persone che usano gli screen reader. Per diversi casi lo utilizziamo come accessibilità, adattamento del dispositivo, elaborazione sul lato server e descrizione complessa dei dati. Per saperne di più clicca: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute .