Roles ARIA: Regiones de puntos de referencia y nombres accesibles

Introducción

Al navegar con un lector de pantalla es importante definir los puntos de referencia, para que las personas usuarias encuentren una mejor navegación y experiencia de usuario. Para que se entienda mejor es conveniente poner nombres accesibles.

¿Qué es un punto de referencia?

Un punto de referencia o landmark roles son las grandes zonas para diferenciar las partes de un sitio web.

Pasos para identificar los puntos de referencia según WAI-ARIA 1.1.

Según la especificación WAI-ARIA 1.1 hay que seguir una serie de pasos para establecer los puntos de referencia:

  1. Identificar una estructura lógica:
    • dividir las áreas perceptibles de contenido
    • Dividir las áreas en subáreas cuando sea necesario
  2. Asignación de roles de referencia a cada área
    • Hay que asignar roles de contenido en función de su tipo.
    • banner,main, complementary y contentinfo deben ser los principales puntos de referencia de nivel. Se recomienda entre 5 y 7 puntos de referencia.
    • Los puntos de referencia se pueden anidar para establercer las etiquetas padre/hijo de la información que se presenta.
  3. Etiquetar áreas.
    • Si un área comienza con un elemento de encabezado(h1-h6), puede usarse como etiqueta para el área usando el atributo aria-labelledby.

Puntos de referencia

Banner: Cabecera

    • Un banner se situa en el comienzo de cada página de un sitio web. Se trata del logotipo de la empresa. Aparece en la parte superior de la página y abarca todo el ancho.
    • Si una página incluye más de un banner cada uno debe una etiqueta única.
    • La etiqueta <header> define un punto de referencia cuando el contexto es el elemento<body>
    • No se considera banner cuando desciende de cualquiera de los elementos: article, aside, main, nav, section.
  • Si <header> no usa la técnica de HTML se debe usar un role="banner" para definir un punto de referencia.

Complementario: complementary

  • Un complementario es una sección que está separada del contenido principal. Normalmente se suele identificar como las barras laterales en el sitio web.
  • Si el contenido complementario no está relacionado con el contenido principal, se le debe asignar una función más general (region).
  • Si incluye más de un complementary, cada uno debe tener una etiqueta única.
  • Si <aside> no usa la técnica de HTML se debe usar un atributo role=»complementary» para definir el punto de referencia.

Información de contenido: contentinfo

  • Un contentinfo es una manera de identificar información común en la parte inferior del sitio web, lo que generalmente se identifica como pie de de página o <footer>, incluida políticas de privacidad y accesibilidad y derechos de autor.
  • Cada página puede contener un contentinfo
  • El contentinfo debe ser de nivel superior.
  • Si incluye más de un contentinfo, cada uno debe tener una etiqueta única.
  • El elemento <footer> define un contentinfo cuando el contexto es el elemento <body>
  • No se considera <footer> cuando desciende de cualquiera de los elementos: article, aside, main, nav, section.
  • Si <footer> no usa la técnica de HTML se debe usar un atributo role=»contentinfo» para definir el punto de referencia.

Formularios: form

  • Un formulario es una región que se compone de elementos con diferentes controles y cada uno de ellos tiene una función determinada.
  • Un campo de formulario debe tener una etiqueta (<label>) para que las personas usuarias puedan entender de qué campo se trata y debe ser visible.
  • Para el campo de búsqueda se usa un input de tipo «search»
  • Si incluye más de un form, cada uno debe tener una etiqueta única.
  • Siempre que sea posible, los controles de formularios deben usar la semántica nativa: <button>, <input>, <select>, <textarea>.
  • El elemento form define un punto de referencia cuando tiene un nombre accesible. Por ejemplo: aria-labelledby, aria-label o title.
  • Importante: Usa role=»form» para identificar una region de la página, no para los campos de formularios. Los campos de formulario tienen su propia etiqueta y tipo.

Contenido principal: main

  • Un main identifica el contenido principal del sitio web.
  • Cada página debe tener un contenido principal y debe ser de niel superior.
  • Si una página incluye más de un main, cada uno debe tener una etiqueta única.
  • Si main no utiliza la técnica de HTML, usa un role=»main» para definir el punto de referencia.

Navegación: Navigation

  • Un navigation sirve para identificar diferentes grupos (listas o enlaces), que se van a utilizar para la navegación por el sitio web.
  • Para cada grupo de enlaces o listas similares, usa la misma etiqueta para cada uno de ellos.
  • Si una página incluye más de un navigation, cada uno debe tener una etiqueta única.
  • Si nav no utiliza la técnica de HTML, usa un role=»navigation» para definir el punto de referencia.

Región: region

  • Un region es una sección lo suficientemente importante como para que las personas usuarias naveguen por ella.
  • Un region debe tener una etiqueta.
  • Si una página incluye más de un region, cada uno debe tener una etiqueta única.
  • El elemento section define un punto de referencia cuando tiene un nombre accesible. Por ejemplo: aria-labelledby, aria-label o title.
  • Si section no utiliza la técnica de HTML, usa un role=»region» para definir el punto de referencia.

¿Cómo poner nombres accesibles?

Siguiendo la especificación WAI ARIA, existe una serie de características de nomenclatura por las que hay que establecer un nombre accesible.

  1. Contenido infantil
  2. Contenido con atributo con aria-label o aria-labelledby.
  3. Controles de formulario con elementos de etiquetas. <label>
  4. Conjuntos de campos con el elemento <legend>
  5. Tablas y figuras con subtítulos.
  6. Nombres de reserva derivados de títulos y marcadores de posición.
  7. Se describe haciendo referencia al contenido con aria-describedby. Tablas y figuras con subtítulos y descripciones derivadas de títulos.

Técnicas de nomenclatura

Hay una serie de técnicas para seguir la nomenclatura y adecuar nombres accesibles.

Contenido secundario

  • Es cuando un elemento tiene su nombre accesible a partir de su contenido. <a href="/">Home</a>, se identifica como la página de Inicio.
  • Los elementos que tienen uno de los siguientes roles son, por defecto, nombrados por una cadena calculada a partir de su contenido descendiente:
  • botón
  • celda
  • caja
  • encabezado de la columna
  • cuadrícula de celdas
  • título
  • enlazar
  • menuitem (el contenido contenido en un menuelemento hijo está excluido)
  • menuitemcheckbox
  • menuitemradio
  • opción
  • radio
  • fila
  • Rowheader
  • cambiar
  • lengüeta
  • información sobre herramientas
  • treeitem (se excluye el contenido incluido en un groupelemento hijo ).
    • En este último ejemplo, al tratarse de un elemento tipo árbol <tree>, hay dos casos especiales en los que se ignoran u omiten ciertos descendientes.
    •  losgroupdescendientes de elementostreeitem y los menudescendientes de elementosmenuitem.
      • Por ejemplo, a continuación tree, el nombre del primer elemento del árbol es Verduras; Se omiten la lechuga, el tomate y la cebolla.
    <ul role="tree">
      <li role="treeitem">Verduras
        <ul role="group">
          <li role="treeitem">Lechuga</li>
          <li role="treeitem"><Tomate</li>
          <li role="treeitem">Cebolla</li>
        </ul>
      </li>
    </ul>

Importante: Si un elemento con uno de los roles anteriores que admite la nomenclatura del contenido secundario se nombra usando aria-labeloaria-labelledby.Se recomienda usarlo en casos excepcionales.

Propiedad aria-label

La propiedad aria-label se usa para nombrar un elemento con una cadena que no se representa visualmente. Tenemos el ejemplo de un botón «Cerrar», es decir, no vale poner como nombre «Cruz» o «Equis», sino que tenemos que poner un nombre que sea comprensible para las personas usuarias.

La propiedad aria-labeles útil cuando no hay contenido de texto visible que sirva como un nombre accesible apropiado.

La propiedad aria-labelafecta a los usuarios de tecnología de asistencia en una de dos formas diferentes, según el rol del elemento al que se aplica. Cuando se aplica a un elemento con uno de los roles que admite la denominación del contenido secundario, como por ejemplo, el nombre que depende de un elemento concreto, (el subtítulo de una tabla, en donde el lector lee el subtítulo y el contenido de la tabla) aria-labeloculta el contenido descendiente de los usuarios de tecnología de asistencia y lo reemplaza con el valor de aria-label.

Sin embargo, cuando se aplica a casi cualquier otro tipo de elemento, las tecnologías de asistencia representarán tanto el valor aria-labelcomo el contenido del elemento. Por ejemplo, el nombre de la siguiente región de navegación es «Producto».

<nav aria-label="Producto">
<!-- Lista de navegación de Productos -->
</nav>

En ese caso, lector leerá «Región de navegación del producto», diciendo el nombre y el rol del elemento, y leerá los enlaces contenidos en esa región.

La propiedad aria-labelledby

La propiedad aria-labelledby es similar a la propiedad aria-label, pero aria-labelledby hace referencias a otros elementos para definir el nombre accesible, el cual depende del elemento anterior.

<span id="night-mode-label">Modo noche</span>
<span role="switch" aria-checked="false" tabindex="0" aria-labelledby="night-mode-label"></span>

El role switch funciona de manera similar a los campos de casilla de verificación (checkboxs) en donde se pueden marcar o no marcar las opciones, (sin marcar/marcado) pero en este caso funciona como un interruptor (activado/desactivado o encendido/apagado).


Esta propiedad es útil porque:

  • Tiene la mayor prioridad cuando los navegadores calculan nombres accesibles, es decir, anula los nombres del contenido secundario y todos los demás atributos de nomenclatura, incluidosaria-label.
  • Puede concatenar contenido de múltiples elementos en una sola cadena de nombre.
  • Incorpora contenido de elementos independientemente de su visibilidad, es decir, incluso incluye contenido de elementos con el atributohidden HTML, CSS display: noneo CSSvisibility: hiddenen la cadena de nombre calculada.
  • Incorpora el valor de los elementos de entrada, es decir, si hace referencia a un cuadro de texto, el valor del cuadro de texto se incluye en la cadena de nombre calculada.

Otro ejemplo con nombre accesible con la propiedad aria-labelledby es el siguiente:

  • Un botón de descargar PDF. El nombre para que sea accesible, deberá tener un espacio entre la extensión y el tamaño. «Descargar PDF, 3.5 MB»


PDF, 3.5 MB

Controles de formulario con el elemento de etiqueta y leyenda.

Es importante recordar que los formularios siguen siendo uno de los principales problemas de accesibilidad para las personas que usan lector de pantalla. Utilizan la etiqueta label, en donde cada uno de ellos cumple su función especifica según del tipo que sea.

Descripción de tablas y figuras con subtítulos.

El elemento caption se usa para descripciones largas en una tabla accesible. Por ejemplo, un encabezado podría servir como un nombre accesible apropiado, y el elemento captionpodría contener una descripción más larga. En tal situación, aria-labelledbypodría usarse tablepara establecer el nombre accesible para el contenido del encabezado y captionse convertiría en la descripción accesible.

Calendario de eventos

Calendario de eventos de los meses de noviembre y diciembre establecidos por días

Nombres alternativos derivados de títulos y marcadores de posición

Por ejemplo, en un campo de tipo radio donde se puede usar el atributo title para poner el título del formulario, en lugar de la etiqueta legend.



Redacción de nombres accesibles efectivos y fáciles de usar

Transmitir función o propósito.

  • Por ejemplo, si un icono que se parece a la letra X cierra un diálogo, nombrarlo Cerrar , no X . Del mismo modo, si un conjunto de enlaces de navegación en la barra lateral izquierda navega entre las páginas del producto en un sitio de compras, nombre el producto de la región de navegación , no a la izquierda .

Poner las palabras más distintivas e importantes primero.

  • Por ejemplo, si una lista de contactos muestra los botones Editar,Eliminar y Acciones para cada contacto, entonces Editar John Doe, Eliminar John Doe y Acciones para John Doe serían nombres mejor accesibles que John Doe edit,John Doe delete y John Doe acciones. Al colocar el verbo primero en el nombre, los usuarios del lector de pantalla pueden distinguir más fácil y rápidamente los botones entre sí, así como del elemento que abre la tarjeta de contacto para John Doe.

Sé conciso.

Para muchos elementos, de una a tres palabras es suficiente. Solo agregue más palabras cuando sea necesario.

NO incluya un nombre de rol ARIA en el nombre accesible.

  • Por ejemplo, no incluya el «botón de» en el nombre de un botón, «la imagen de» en el nombre de una imagen o la «navegación de» en el nombre de una región de navegación. Hacer esto crea una salida de lector de pantalla duplicada, ya que los lectores de pantalla transmiten el papel de un elemento además de su nombre.

Crea nombres únicos para elementos con el mismo rol a menos que los elementos sean realmente idénticos.

  • Por ejemplo, asegúrese de que cada enlace en una página tenga un nombre diferente, excepto en los casos en que varios enlaces hagan referencia a la misma ubicación. Del mismo modo, asigne a cada región de navegación de una página un nombre diferente a menos que haya regiones con contenido idéntico que realicen funciones de navegación idénticas.
  • Comienza los nombres con una letra mayúscula; ayuda a algunos lectores de pantalla a hablarlos con la inflexión adecuada. No termine los nombres con un punto; No son oraciones.