Búsqueda y corrección de los problemas de accesibilidad del lector de pantalla

5 minutos

Analizamos brevemente los lectores de pantalla en la unidad "Accesibilidad y lectores de pantalla". Un lector de pantalla hace lo que su nombre indica: leerle la pantalla. Además, proporciona indicaciones auditivas, contexto y control para desplazarse por las aplicaciones web y el contenido complejo e interactuar con ellos.

En Windows, Narrador se incluye de forma predeterminada. JAWS y NVDA (acceso a escritorio no visual) también se pueden instalar en Windows. En macOS e iOS, VoiceOver está instalada de forma predeterminada.

En el ejercicio siguiente, habilitará un lector de pantalla proporcionado por un sistema operativo y lo usará para interactuar con el sitio web de pizza.

Creación de contenido accesible para lectores de pantalla

Las aplicaciones web modernas no son simples páginas rellenas de texto. Como mínimo, también incluyen navegación, encabezados e imágenes. Muchas incluyen formularios interactivos, registro e inicio de sesión, funcionalidad de búsqueda, tablas de datos estructurados, etc.

Los lectores de pantalla pueden ayudar a los usuarios a interactuar con el contenido complejo, si dicho contenido está estructurado correctamente. La creación de la estructura correcta requiere cumplir los estándares web en lugar de hacer que las cosas se vean bien en el explorador.

Estructura de la página

Al diseñar visualmente, puede ser tentador usar simplemente <div> en todas partes. A un elemento <div> se le puede aplicar un estilo para que se parezca a todo mediante CSS, y desde luego Bootstrap no desaconseja usar los elementos <div> libremente.

Sin embargo, puede proporcionar mucha más información semántica y contexto a los lectores de pantalla usando en su lugar elementos HTML estructurales siempre que sea posible. Los elementos HTML estructurales incluyen:

<header>: El contenido que suele ver en la parte superior de una página, incluido un logotipo, navegación, búsqueda e inicio de sesión.
<nav>: Indica una parte de la página con vínculos de navegación.
<main>: Como indica el nombre, esta etiqueta indica el contenido dominante de una página.
<article>: Un artículo individual con un encabezado, que normalmente se muestra en una lista.
<aside>: Información adicional en una página, como barras laterales o llamadas.
<footer>: La información de la parte inferior de una página que generalmente incluye información de copyright y una política de privacidad.
<section>: Indica un bloque de contenido que no cabe en una de las agrupaciones anteriores.

Por lo general, todos estos elementos pueden tener el mismo estilo que un elemento <div>, por lo que solo puede reemplazar la etiqueta. La página de diseño predeterminada de ASP.NET Core (que se encuentra en /Pages/Shared/_Layout.cshtml) usa muchos de estos elementos, por ejemplo, header, nav, main y footer.

Elementos de encabezado

Los elementos HTML <h1> - <h6> muestran los encabezados del contenido. <h1> es el nivel más alto, reservado para el título de página, y solo se debe usar una vez por página. Los niveles posteriores a <h1> se anidan en orden de importancia.

Imagine una página de nuestro sitio web con información detallada sobre los ingredientes de las pizzas. Podría usar los siguientes encabezados:

- Margherita Pizza Ingredients (h1)
  - Dough (h2)
    - Flour (h3)
    - Yeast (h3)
    - Salt (h3)
    - Sugar (h3)
  - Sauce (h2)
  - Toppings (h2)
    - Mozzarella (h3)
    - Basil (h3)
    - etc.

Como vemos en el ejercicio siguiente, un error común es usar el estilo de texto para indicar un encabezado en lugar de usar un elemento de título real. Los lectores de pantalla no ven esos pseudo encabezados. Debe usar los elementos de encabezado reales para proporcionar navegación a los lectores de pantalla.

Orden de tabulación

Muchos de los usuarios se mueven a través de la aplicación mediante un teclado y dependen del orden de tabulación. Afortunadamente, es difícil (aunque no imposible) romper por accidente el orden de tabulación en una página HTML. Aun así, debe comprobar el orden de tabulación mediante FastPass. Practique con la navegación por la aplicación usando solo el teclado para comprender la experiencia del usuario.

Imágenes y texto alternativo

Usamos imágenes en páginas web de varias maneras diferentes. Algunas son importantes para el contenido, mientras que otras son decorativas. Para proporcionar esta información a los lectores de pantalla, todas las imágenes deben incluir un atributo alt.

Si la imagen es una parte importante del contenido, el atributo alt debe incluir una breve descripción. Imagine que describiera a alguien la página web por teléfono, ¿qué diría?

<img src="/img/mozzarella.png" alt="A close-up picture of a fresh baked mozzarella pizza">

Si la imagen es meramente decorativa, basta con que incluya una descripción vacía, como esta:

<img src="/img/divider.png" alt="">

Comprobación de conocimientos

Continuar