Regole per l'utilizzo di ARIA in HTML

Cos’è ARIA e quali sono i principi fondamentali di ARIA

L’accesso a Internet è un prerequisito per una piattaforma di successo. Sfortunatamente, molti siti web hanno barriere di accessibilità che rendono difficile o impossibile per gli utenti con disabilità fisica vedere e interagire con tutti gli elementi del sito web. Se vuoi che il tuo sito sia visto da tutti gli utenti e ottieni più traffico e più conversioni, devi investire tempo e sforzi per migliorare l’accessibilità delle tue pagine web.

Che cos’è l’accessibilità a Internet?

Se il sito è accessibile, è progettato in modo che le persone con disabilità possano interagire con esso e visualizzare tutti i contenuti. Esistono standard specifici chiamati Web Accessibility Initiative (WAI) sviluppati dal W3C per aiutare i proprietari di siti Web a rendere i loro siti Web più accessibili.

Cos’è ARIA?

ARIA è l’acronimo di Accessible Rich Internet Applications. ARIA è un insieme di attributi speciali pubblicati dal W3C che possono essere aggiunti agli elementi HTML per rendere le pagine Web e le applicazioni più accessibili alle persone con disabilità. Questi attributi non forniscono funzionalità. Forniscono descrizioni aggiuntive per le tecnologie assistive (AT) come i lettori di schermo.

Principali funzioni di ARIA

Gli attributi ARIA includono i seguenti componenti: ruoli, stati e proprietà.

Ruoli

I ruoli definiscono il tipo di elemento dell’interfaccia utente. I ruoli vengono aggiunti tramite l’attributo role=”<ROLE TYPE>”. Dopo l’installazione, il ruolo non cambia.

Ruoli dell’ARIA:

  • punto di riferimento
  • aggeggio
  • documento
  • astratto
Regole per l'utilizzo di ARIA in HTML

Ruoli storici di ARIA

I ruoli dei punti di riferimento semplificano la navigazione suddividendo la pagina in diverse sezioni, come ricerca, banner, navigazione, applicazione e così via. In questo modo, lo screen reader è in grado di annunciare l’inizio e la fine di ogni ruolo importante che aiuta le persone con disabilità a identificare le diverse parti di una pagina web.

Widget Ruoli ARIA

I ruoli widget vengono utilizzati per dare significato agli elementi dell’interfaccia utente come collegamento, pulsante, casella di controllo e così via. Gli attributi del widget consentono alle persone che utilizzano AT di interagire con la pagina web. Ad esempio, possono aprire e chiudere schede, compilare moduli e così via.

Documenta i ruoli ARIA

I ruoli del documento contengono descrizioni delle strutture che organizzano il contenuto della pagina, come img, elenco, riga, barra degli strumenti e così via.

Ruoli astratti di ARIA

I ruoli astratti non vengono utilizzati nel codice. Questi sono gli attributi che il browser usa per dare ai ruoli il loro significato e concetto, e per aiutare ad aggiungere nuovi ruoli.

Stati e proprietà

Gli stati (aria-grab, aria-disabled, aria-checked, ecc.) e le proprietà (aria-label, aria-haspopup, aria-control, ecc.) supportano i ruoli ARIA. Gli stati possono cambiare da soli o in base all’interazione dell’utente, mentre le proprietà di solito non cambiano dopo l’impostazione.

Categorie di stati e proprietà:

  • Attributi widget
  • Attributi della regione attiva
  • Attributi di trascinamento della selezione
  • Attributi di relazione

Puoi conoscere ogni attributo ARIA in modo più dettagliato nella pagina ARIA W3C. https://www.w3.org/TR/wai-aria/

Migliora l’accessibilità del tuo sito web!

Ora capisci cos’è ARIA e come fornisce informazioni aggiuntive alle tecnologie assistive. Implementando le strategie ARIA, puoi assicurarti che le persone con disabilità possano interagire con il tuo sito.