El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

ARIA (Accessible Rich Internet Applications) és un conjunt d'atributs especials per a HTML que defineixen maneres de fer que el contingut web i les aplicacions web siguin més accessibles per a les persones amb discapacitats. Els rols ARIA ajuden a proporcionar informació addicional sobre els elements de la pàgina, millorant així l'experiència d'usuari per a les persones que utilitzen tecnologies assistives com els lectors de pantalla.

Conceptes Clau

ARIA (Accessible Rich Internet Applications): Un conjunt d'atributs que milloren l'accessibilitat dels elements HTML.
Rols ARIA: Defineixen el propòsit d'un element dins de la interfície d'usuari.
Atributs d'estat i propietats ARIA: Proporcionen informació addicional sobre l'estat i les propietats dels elements.

Tipus de Rols ARIA

Rols de Llocs de Lloc (Landmark Roles)

Aquests rols defineixen les regions importants d'una pàgina web:

role="banner": Defineix una regió de capçalera.
role="navigation": Defineix una regió de navegació.
role="main": Defineix la regió principal del contingut.
role="complementary": Defineix una regió complementària al contingut principal.
role="contentinfo": Defineix una regió de peu de pàgina.

Rols de Widget

Aquests rols defineixen elements interactius:

role="button": Defineix un botó.
role="checkbox": Defineix una casella de verificació.
role="dialog": Defineix un diàleg modal.
role="tab": Defineix una pestanya dins d'un conjunt de pestanyes.
role="tabpanel": Defineix el contingut associat a una pestanya.

Rols de Document

Aquests rols defineixen estructures de document:

role="article": Defineix una secció independent del contingut.
role="heading": Defineix un encapçalament.
role="list": Defineix una llista.
role="listitem": Defineix un element dins d'una llista.

Exemples Pràctics

Exemple 1: Utilitzant Rols de Llocs de Lloc

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Rols ARIA</title>
</head>
<body>
    <header role="banner">
        <h1>Benvingut al meu lloc web</h1>
    </header>
    <nav 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>
    </nav>
    <main role="main">
        <article role="article">
            <h2>Notícia principal</h2>
            <p>Aquest és el contingut principal de la notícia.</p>
        </article>
    </main>
    <aside role="complementary">
        <h2>Informació addicional</h2>
        <p>Aquesta és una secció complementària.</p>
    </aside>
    <footer role="contentinfo">
        <p>&copy; 2023 El meu lloc web</p>
    </footer>
</body>
</html>

Exemple 2: Utilitzant Rols de Widget

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exemple de Rols ARIA</title>
</head>
<body>
    <button role="button">Fes clic aquí</button>
    <div role="dialog" aria-labelledby="dialog-title" aria-hidden="true">
        <h2 id="dialog-title">Diàleg Modal</h2>
        <p>Aquest és un diàleg modal.</p>
        <button role="button">Tanca</button>
    </div>
</body>
</html>

Exercicis Pràctics

Exercici 1: Afegir Rols ARIA a una Pàgina Web

Instruccions:

Crea una pàgina HTML amb una capçalera, una secció de navegació, un article principal, una secció complementària i un peu de pàgina.
Assigna els rols ARIA adequats a cada secció.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de Rols ARIA</title>
</head>
<body>
    <header role="banner">
        <h1>Capçalera del lloc web</h1>
    </header>
    <nav role="navigation">
        <ul>
            <li><a href="#home">Inici</a></li>
            <li><a href="#about">Sobre nosaltres</a></li>
            <li><a href="#services">Serveis</a></li>
            <li><a href="#contact">Contacte</a></li>
        </ul>
    </nav>
    <main role="main">
        <article role="article">
            <h2>Article Principal</h2>
            <p>Aquest és el contingut principal de l'article.</p>
        </article>
    </main>
    <aside role="complementary">
        <h2>Secció Complementària</h2>
        <p>Aquesta és una secció complementària.</p>
    </aside>
    <footer role="contentinfo">
        <p>&copy; 2023 El meu lloc web</p>
    </footer>
</body>
</html>

Exercici 2: Crear un Widget Accessible

Instruccions:

Crea un botó que, quan es fa clic, mostri un diàleg modal.
Utilitza els rols ARIA adequats per fer que el diàleg sigui accessible.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Exercici de Widget Accessible</title>
    <style>
        #dialog {
            display: none;
            border: 1px solid #ccc;
            padding: 20px;
            background: #fff;
        }
    </style>
    <script>
        function toggleDialog() {
            var dialog = document.getElementById('dialog');
            var isHidden = dialog.getAttribute('aria-hidden') === 'true';
            dialog.setAttribute('aria-hidden', !isHidden);
            dialog.style.display = isHidden ? 'block' : 'none';
        }
    </script>
</head>
<body>
    <button role="button" onclick="toggleDialog()">Obre el diàleg</button>
    <div id="dialog" role="dialog" aria-labelledby="dialog-title" aria-hidden="true">
        <h2 id="dialog-title">Diàleg Modal</h2>
        <p>Aquest és un diàleg modal.</p>
        <button role="button" onclick="toggleDialog()">Tanca</button>
    </div>
</body>
</html>

Errors Comuns i Consells

Error: No utilitzar rols ARIA en elements interactius.
- Consell: Assegura't d'afegir rols ARIA adequats a elements com botons, diàlegs i pestanyes per millorar l'accessibilitat.
Error: No proporcionar etiquetes adequades per a elements amb rols ARIA.
- Consell: Utilitza atributs com aria-labelledby i aria-describedby per proporcionar etiquetes i descripcions clares.

Conclusió

Els rols ARIA són una eina poderosa per millorar l'accessibilitat de les aplicacions web. Utilitzant correctament aquests rols, pots assegurar-te que el teu lloc web sigui més accessible per a tots els usuaris, incloent aquells que utilitzen tecnologies assistives. En el proper tema, explorarem com provar l'accessibilitat del teu lloc web per assegurar-te que compleix amb els estàndards d'accessibilitat.

Utilitzant rols ARIA

Introducció

Conceptes Clau

Tipus de Rols ARIA

Rols de Llocs de Lloc (Landmark Roles)

Rols de Widget

Rols de Document

Exemples Pràctics

Exemple 1: Utilitzant Rols de Llocs de Lloc

Exemple 2: Utilitzant Rols de Widget

Exercicis Pràctics

Exercici 1: Afegir Rols ARIA a una Pàgina Web

Exercici 2: Crear un Widget Accessible

Errors Comuns i Consells

Conclusió

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet