Autor: Eduardo Oviedo Blanco
Para usar este taller efectivamente, clone el código en su ambiente local.
git clone https://github.com/edWAR6/aria.git
Si desea subir el taller en su repositorio personal. Cree un repositorio en su perfil, luego:
git remote set-url origin https://github.com/<tu usuario>/aria.git
El nombre del repositorio puede cambiar. Siga las instrucciones y guarde sus cambios.
Este taller demuestra algunos de los conceptos básicos de los elementos de accesibilidad de ARIA.
- Primero vea el código en ejecución y active su lector de pantallas o screen reader.
-
Note como la lectura del campo de búsqueda sin "label" no es óptima.
-
Note que la lista es leida en corrido y nunca se indica que se está interpretando una lista.
-
Note que el contenido dinámico no es nunca leido.
- Para iniciar con una buena experiencia accesible, primero indique el lenguaje de la página.
<html lang="en">Si quiere probar en otro lenguaje cambielo al código correspondiente. Asegúrese de configurar su screen reader también.
- Agregue roles y
area-labela la sección de búsqueda para ser más específicos.
<form role="searchbox">
<input type="search" name="search" placeholder="Search query" role="search" aria-label="Search through site content">
</form>-
Pruebe, haciendo que el lector lea toda la página y también haciendo click directamente al campo de texto.
-
Agregue los roles de lista a la lista de animales favoritos.
<section role="article">
<p>My favorite animals:</p>
<div class="favorites" role="list">
<div role="listitem">Pig</div>
<div role="listitem">Gazelle</div>
<div role="listitem">Llama</div>
<div role="listitem">Majestic moose</div>
<div role="listitem">Hedgehog</div>
</div>
</section>-
Pruebe, haciendo que el lector lea toda la página y también haciendo click directamente a la lista.
-
Agregue valor semántico a la sección interactiva. Además haciendo uso de la propiedad
aria-livelogre que el lector de pantallas anuncie los cambios dinámicos.
<section class="preview" role="complementary"> <div class="animal-description" aria-live="assertive">- Pruebe, haciendo que el lector lea toda la página y también haciendo click directamente los animales.
ARIA debe usarse cuando haga falta, cuando este sea necesario. La recomendación es, probar siempre con varios lectores de pantallas (Screen readers) para verificar el nivel de accesibilidad.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent