Accesibilidad y encabezados: diseño para usuarios con discapacidad visual

Publicado: 2021-07-19

Un pequeño detalle, como cómo usa los encabezados en su sitio web o aplicación, podría costarle prospectos o ventas. Siga leyendo para descubrir por qué su sitio web debe ser accesible, qué podría suceder si no lo es y algunas de las mejores prácticas sobre cómo puede usar los encabezados para guiar a los usuarios a través de una página correctamente.

El caso de la accesibilidad

Los encabezados se pueden pasar por alto fácilmente al diseñar un nuevo sitio web o actualizar el anterior. Los especialistas en marketing tienden a centrarse más en el lado estético del diseño y menos en el lado práctico. Es cierto que los elementos visuales juegan un papel importante en la experiencia del usuario (UX) de un sitio web, sin embargo, hacerlo más accesible para los usuarios con discapacidades visuales puede aumentar la cantidad de visitantes que se convierten.

Las estadísticas refuerzan nuestro caso de accesibilidad:

Aproximadamente 253 millones de personas en todo el mundo sufren de discapacidad visual.
cada día 250 personas empiezan a perder la vista en el Reino Unido
Más de 2 millones de personas en el Reino Unido viven con pérdida de visión que tiene un impacto significativo en su vida diaria, por ejemplo, incapacidad para conducir.
La degeneración relacionada con la edad es la principal causa de ceguera en los adultos.

ciego usando telefono

Con 4,1 millones de personas que se espera que se vean afectadas por la pérdida de visión en el Reino Unido para 2050 , las empresas no pueden permitirse el lujo de no adaptar sus sitios web a todos los públicos. Esto es especialmente importante si su mercado objetivo es un grupo demográfico de mayor edad, que es más probable que experimente problemas de visión.

Un aspecto simple como usar los títulos correctamente puede marcar una gran diferencia y no es difícil de aplicar. También podría ahorrarle los costos de presentar una demanda.

Caso de dominó

Domino's Pizza es un buen ejemplo de cómo descuidar la accesibilidad para los usuarios con discapacidad visual puede resultar costoso.

Un cliente estadounidense ciego presentó una queja en 2016 después de tener dificultades para elegir ingredientes, usar un código de descuento e incluso completar su pedido en la aplicación para iPhone del restaurante. El problema era que la aplicación no se integraba con el software de lectura de pantalla del teléfono, que vocaliza el contenido según el texto que se usa correctamente y las imágenes etiquetadas con texto. La aplicación y el sitio web de la compañía carecían del código correcto para permitir que el iPhone leyera las opciones.

búsqueda por voz de accesibilidad

Si bien los jueces se pusieron del lado de Domino's inicialmente, el tribunal de apelaciones falló a favor del cliente la semana pasada alegando que " la supuesta inaccesibilidad del sitio web y la aplicación de Domino's impide el acceso a los bienes y servicios de sus franquicias físicas de pizza, que son lugares públicos". alojamiento ”.

En el Reino Unido, el Real Instituto Nacional de Personas Ciegas también acogió con satisfacción el dictamen que comenta para el BCC : “Todas las organizaciones tienen la responsabilidad, en virtud de la Ley de Igualdad de 2010, de garantizar que sus sitios web y aplicaciones puedan ser utilizados por personas ciegas y deficientes visuales, incluidas aquellas que utilizan lectores de pantalla ”.

Hay diferentes formas en que las empresas pueden hacer que sus sitios web sean más accesibles y el uso correcto de etiquetas de encabezado ayuda en gran medida al usuario a navegar por una página.

Mejores prácticas de encabezados para la accesibilidad

Existe bastante confusión y mal uso de los encabezados, en parte debido a que los desarrolladores siguen un diseño demasiado de cerca o que los diseñadores no conocen la forma correcta de usar los encabezados.

Si no está seguro de qué es un encabezado, W3C tiene una buena definición y Yoast explica su uso de SEO.

W3C define el uso correcto como:

“Los seis elementos de encabezado, H1 a H6, denotan encabezados de sección. Aunque el orden y la aparición de los encabezados no están limitados por la DTD HTML, los documentos no deben omitir niveles (por ejemplo, de H1 a H3), ya que convertir dichos documentos en otras representaciones suele ser problemático ".

El uso correcto de los encabezados no solo tiene un impacto en la forma en que las personas y Google leen su página, sino que también tiene un gran impacto en la forma en que los lectores de pantalla presentan su contenido al usuario. Las personas que utilizan herramientas de accesibilidad pueden navegar por la página a través de sus encabezados, por lo que si tiene algo importante que decir, debe estar estructurado y visualmente diseñado como lo pretendía.

No se necesita trabajo adicional para que los encabezados sean accesibles cuando está creando su página. Si sigue el uso correcto, se cumplirán los criterios de accesibilidad. Los consejos de accesibilidad de W3c para títulos explican esto bastante bien y, como puede ver, no solo tiene sentido para la accesibilidad, sino que también tiene sentido estructural y visualmente.

¿Cómo verifico los títulos?

Si sus desarrolladores o tema siguen el uso correcto de los encabezados, entonces debería poder simplemente agregar su contenido y agregar su encabezado de la manera correcta a través de su editor / CMS.

Como nota al margen, no necesita agregar encabezados en todas partes, un simple H1 (que generalmente es el título de la página) seguido de un H2 sería suficiente, pero digamos que desea estructurar correctamente una página particularmente larga o está revisando la de otra persona. ¿trabaja? Intente usar uno de estos complementos para su navegador favorito:

Mapa de encabezados para Chrome
Mapa de encabezados para Firefox

Una vez instalados, son muy fáciles de usar y cualquier encabezado incorrecto aparece resaltado en rojo en la barra lateral cuando hace clic en el botón del complemento. Esta función también será una opción predeterminada en el editor de Gutenberg en la versión de WordPress 5.0 y se explica en este sitio.