Quali elementi in HTML5 possono utilizzare attributi ARIA?

Praticamente tutti gli elementi standard HTML5 possono utilizzare attributi ARIA per migliorare l'accessibilità per gli utenti di tecnologie assistive.

Alcuni esempi:

• Elementi di struttura semantica: header, footer, nav, main, aside, article, section. Possono essere usati per definire ruoli di zone della pagina.
• Elementi interattivi: button, a, input, select, textarea. Possono ricevere attributi come aria-label, aria-describedby, aria-expanded e altri.
• Elementi di liste: ul, ol, li. Possono usare aria-setsize, aria-posinset.
• Elementi di tabelle: table, tr, th, td. Sebbene HTML5 abbia propri attributi per l'accessibilità delle tabelle (scope, headers), ARIA può completarli.
• Elementi di moduli: form, fieldset, legend.
• Elementi multimediali: img, audio, video. Possono ricevere attributi descrittivi (aria-label).

Ci sono eccezioni, ad esempio:

• Elementi inizialmente nascosti o decorativi (script, style, meta, link).
• Elementi che non sono visualizzati nel DOM o non sono accessibili all'interazione.

È importante usare ARIA solo quando gli attributi nativi HTML sono insufficienti, e seguire il principio "Usa gli elementi nativi quando possibile". L'uso eccessivo o scorretto di ARIA può peggiorare l'accessibilità.