Accesibilidad y HTML semántico

25/10/2020

El código HTML semántico es un término usado con regularidad cuando se habla de accesibilidad, y por un buen motivo. Es una de las bases en la que está sustentado un sitio web accesible, ¿pero qué significa?

Usar HTML semántico es utilizar un elemento por su significado y no por su presentación visual. Un rol implícito es asignado a un elemento nativo de html describiendo qué es. Por ejemplo un <h1> tiene un rol de encabezado y nivel 1 indicando su jerarquía. Ésta información es expuesta por el API de accesibilidad del navegador y permite a tecnologías de asistencia identificar que es un encabezado de nivel 1.

Éste es uno de los motivos por el cual es importante usar un elemento por su propósito. Un div con la presentación visual de un encabezado tendría un tamaño de tipografía más grande y estaría en negrita. Su significado se puede inferir por estas pistas visuales, y una persona vidente podría entender que es un encabezado y hará la asociación con el contenido que representa. Sin embargo, una persona ciega usando un lector de pantalla no puede hacer esa asociación, porque un div no tiene ningún significado semántico y por tanto tecnologías de asistencia no tienen cómo identificar al elemento como un encabezado.

Encabezados

Los encabezados describen secciones de la página y están diseñados para comunicar una jerarquía lógica. Estructurados de manera correcta, permiten al usuario entender mejor la organización de la página.

Son especialmente importantes para una persona usando un lector de pantalla ya que te permite navegar la página usándolos como atajos, dando un acceso más fácil a la información y sirviendo como una tabla de contenidos.

No saltar niveles

Seguir una jerarquía lógica de encabezados es considerado una buena práctica. A las personas ciegas les ayuda a entender la importancia relativa entre distintas secciones. Es recomendable usar un solo encabezado de nivel 1 (<h1>), cada nueva sección será un <h2>, si existe una subsección dentro del <h2> será un <h3>, y así sucesivamente hasta un <h6>. Por diversos motivos esto no siempre será factible, pero es recomendable mantener una jerarquía lógica y secuencial en la medida de lo posible.

Encabezados deben describir el contenido debajo de ellos

Cuando hay texto relacionado con un encabezado, pero se encuentra por encima de él, este será pasado por alto por una persona ciega usando un lector de pantalla que navega el sitio usando los encabezados como atajos. Un ejemplo de esto es cuando se crea un artículo de un blog o una noticia que incluye información sobre el autor o la fecha de publicación:

// Incorrecto <article> <time>15 Julio, 2020</time> <h2><a href="...">HTML semántico</a></h2> <article> // Correcto <article> <h2><a href="...">HTML semántico</a></h2> <time>15 Julio, 2020</time> <article>

Puntos de referencia

HTML5 introdujo elementos de seccionamiento que ayudan a dar estructura a la página y sirven como puntos de referencia, o áreas reconocibles dentro de la página. Estas tienen una importancia especial para personas que usan un lector de pantalla ya que les permite navegar un sitio utilizándolos como atajos y así pueden acceder a la información de manera más fácil. Una persona con discapacidad motora puede también instalar un plugin para saltar partes del contenido sin tener que pasar por todos los elementos enfocables usando la tecla de tabulación.

Los puntos de referencia, o en inglés: landmarks , también pueden ser definidos usando roles ARIA. De hecho algunos puntos de referencia solo están disponibles a través de estos roles.

Usando HTML5

Los elementos nativos más comunes y útiles para usar como puntos de referencia son: <header>, <nav>, <aside>, <main> y <footer>. Estos tienen buen soporte en tecnologías de asistencia que permitirán al usuario usarlos como atajos.

Existen otros puntos de referencia, como <section>, <article> y <form>, pero el soporte es variado. Un elemento section debería tener un encabezado, el cual ya puede ser usado como atajo, por tanto no es necesariamente igual de útil, es recomendable además limitar su uso para contenido cuyo propósito no pueda ser descrito en los puntos de referencia <main>, <aside> o <nav>. El elemento <article> tiene soporte como atajo en el lector de pantalla JAWS para Windows, y soporte variado en VoiceOVer para MacOS. <form> no es utilizable como atajo, a menos que el rol se defina de manera explícita usando ARIA.

Es importante tener en consideración que los elementos de seccionamiento de HTML5 van a necesitar atención especial para tener soporte en navegadores más antiguos que no identifican correctamente los elementos HTML5. Es necesario aplicar display: block en ellos, de lo contrario serán tratados como elementos en línea.

Usando ARIA

ARIA, en inglés: Accessible Rich Internet Applications , consiste en una serie de atributos que ayudan a hacer el contenido más accesible a través de roles, estados y propiedades. Los elementos de seccionamiento tienen roles implícitos, pero utilizando ARIA es posible aplicarlos a otros elementos como un div de manera explícita. Los roles ARIA de puntos de referencia son:

  • role="banner" (header)
  • role="navigation" (nav)
  • role="complementary (aside)
  • role="main" (main)
  • role="contentinfo (footer)
  • role="region" (section)
  • role="article (article)
  • role="form" (form)
  • role="search" (no existe un equivalente en HTML5).

HTML5 o ARIA?

La recomendación usualmente es usar HTML nativo en vez de ARIA, pero para un lector de pantalla el resultado es el mismo.

Algunos navegadores y tecnologías de asistencia pueden tener problemas en identificar el rol implícito de un elemento <nav> y <footer>, por lo tanto es necesario además utilizar el rol de manera explícita en estos elementos para solucionarlo:

<nav role="navigation"> ... </nav> <footer role="contentinfo"> ... </footer>

Múltiples puntos de referencia del mismo tipo

Un punto de referencia pierde parte de su función (identificar partes únicas en la página) si es usado en múltiples ocasiones. La especificación de ARIA solo permite una instancia de los roles banner, main y contentinfo. HTML5 no tiene esta restricción, pero es recomendable seguir la misma norma.

En caso de utilizar múltiples instancias del elemento <nav> o <aside>, se les debe dar un nombre accesible que los distinga:

<nav role="navigation" aria-label="primaria"> ... </nav> <nav role="navigation" aria-label="secundaria"> ... </nav>

De esta manera una persona que use un lector de pantalla y abra la opción que enumera todos los puntos de referencia en la página podrá diferenciarlos.

Botones y enlaces

Los elementos HTML tienen un rol implícito asociado a ellos, esto le permite a tecnologías de asistencia identificar qué son. Los elementos interactivos cuentan además con cierta funcionalidad que es importante en términos de accesibilidad. Por ejemplo un enlace recibe foco y es activable presionando la tecla entrar.

Un enlace tiene como propósito llevar al usuario a otra página o sección del sitio. La función del botón es gatillar una acción, como por ejemplo abrir un submenú, y es activable usando las teclas espacio y entrar.

Desafortunadamente, se suele confundir el propósito entre estos elementos y se ven muchos ejemplos como el siguiente:

<a onclick=”abrirMenu”>Servicios</a>

El problema en el ejemplo es que un enlace sin atributo href no recibe foco, por lo tanto una persona usando un teclado no tendrá acceso a él. Un lector de pantalla lo anunciará como un enlace, y el usuario puede inferir que lo llevará a otra página del sitio, sin embargo al interactuar con él eso no ocurre.

Para intentar arreglar el problema alguien podría agregar un atributo tabindex para que reciba foco, y usar ARIA para darle un rol explícito que lo identifique como un botón:

<a tabindex=”0” role=”button” onclick=”abrirMenu”>Servicios</a>

Ahora el elemento recibe foco y un lector de pantalla lo anunciará como un botón, pero un botón a diferencia de un enlace es activable con las teclas espacio y entrar. Si el usuario intenta activar el botón con la tecla espacio, no funcionará.

Se podría agregar dicha funcionalidad usando el evento onkeydown, o mejor aún se podría utilizar el elemento que corresponde, en este caso un botón:

<button onclick=”abrirMenu”>Servicios</button>

Si se respeta la funcionalidad de un elemento y no se usa en base a su apariencia, sino a su propósito, creamos un interfaz más usable y entendible para todos. Los enlaces deben ser usados como elementos navegacionales, y los botones para gatillar una acción.