El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Ús de Rols i Propietats ARIA

Següent ►
►

En aquest tema, explorarem com utilitzar els rols i les propietats ARIA (Accessible Rich Internet Applications) per millorar l'accessibilitat de les aplicacions web. ARIA és un conjunt d'atributs que es poden afegir a l'HTML per proporcionar informació addicional sobre els elements de la pàgina, especialment útils per a usuaris que utilitzen tecnologies assistencials com lectors de pantalla.

Què és ARIA?

  • ARIA és un conjunt d'atributs que es poden afegir a l'HTML per millorar l'accessibilitat de les aplicacions web.
  • Proporciona informació sobre el comportament dinàmic de les pàgines web que no es pot expressar només amb HTML estàndard.
  • ARIA és especialment útil per a components d'interfície d'usuari complexos com ginys, menús, pestanyes, etc.

Rols ARIA

Els rols ARIA defineixen el tipus d'element que representa un component de la interfície d'usuari. Alguns dels rols més comuns inclouen:

  • role="button": Indica que un element actua com un botó.
  • role="navigation": Defineix una secció de navegació dins de la pàgina.
  • role="dialog": Indica que un element és un diàleg modal.
  • role="alert": Utilitzat per mostrar missatges d'alerta que requereixen l'atenció immediata de l'usuari.

Exemple de Rols ARIA

<div role="navigation">
  <ul>
    <li><a href="#home">Inici</a></li>
    <li><a href="#about">Sobre Nosaltres</a></li>
    <li><a href="#contact">Contacte</a></li>
  </ul>
</div>

En aquest exemple, el rol navigation indica que el div conté elements de navegació.

Propietats ARIA

Les propietats ARIA proporcionen informació addicional sobre l'estat o les característiques d'un element. Algunes propietats comunes inclouen:

  • aria-label: Proporciona una etiqueta textual per a un element.
  • aria-hidden: Indica si un element és visible o no per a les tecnologies assistencials.
  • aria-expanded: Indica si un element, com un menú desplegable, està expandit o col·lapsat.
  • aria-controls: Indica que un element controla l'estat d'un altre element.

Exemple de Propietats ARIA

<button aria-expanded="false" aria-controls="menu">Menú</button>
<ul id="menu" aria-hidden="true">
  <li><a href="#profile">Perfil</a></li>
  <li><a href="#settings">Configuració</a></li>
</ul>

En aquest exemple, el botó controla l'estat del menú. La propietat aria-expanded indica si el menú està expandit, i aria-controls especifica quin element està controlant.

Exercici Pràctic

Objectiu: Crear un menú desplegable accessible utilitzant rols i propietats ARIA.

Instruccions:

  1. Crea un botó que controli un menú desplegable.
  2. Utilitza role="button" per indicar que l'element és un botó.
  3. Afegeix aria-expanded al botó per indicar l'estat del menú.
  4. Utilitza aria-controls per associar el botó amb el menú.
  5. Afegeix aria-hidden al menú per indicar si està visible o no.

Solució:

<button id="menuButton" role="button" aria-expanded="false" aria-controls="dropdownMenu">Menú</button>
<ul id="dropdownMenu" aria-hidden="true">
  <li><a href="#option1">Opció 1</a></li>
  <li><a href="#option2">Opció 2</a></li>
  <li><a href="#option3">Opció 3</a></li>
</ul>

<script>
  const button = document.getElementById('menuButton');
  const menu = document.getElementById('dropdownMenu');

  button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    menu.setAttribute('aria-hidden', expanded);
  });
</script>

Conclusió

L'ús de rols i propietats ARIA és essencial per crear aplicacions web accessibles. Aquests atributs proporcionen informació addicional que ajuda les tecnologies assistencials a interpretar correctament el contingut i la funcionalitat de la pàgina. Practicar l'ús d'ARIA en els teus projectes t'ajudarà a crear experiències web més inclusives per a tots els usuaris.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats