Con el fin de evitar el recorrido innecesario del usuario o la imposibilidad de poder seguir navegando en nuestra página web, es necesario tener la opción de cerrar los elementos como menús, dropdown, combo-box, etc. Con la tecla Escape.  Para esto usaremos una función de jQuery en la cual se establece que, al presionar la…

Para limitar la navegación del foco de la pantalla, se usa una función de jQuery (tabFocusRestrictor) para establecer un rango entre 2 elementos y omitir aquellos que se consideren innecesarios para el lector o que alteren totalmente el orden en el que el usuario navegue por el sitio web.  Esto provoca que el lector quede…

Los carruseles muestran una colección de elementos de uno en uno. También se conocen como «slideshows» y «sliders». Entre los usos típicos de los carruseles están el desplazamiento de titulares de noticias, artículos destacados en páginas de inicio y galerías de imágenes. Implementación accesible Para que un carrusel sea accesible, es esencial que todos los…

Un acordeón es un conjunto de encabezados interactivos apilados verticalmente, cada uno de los cuales contiene un título, un fragmento de contenido o una miniatura que representa una sección de contenido. Los encabezados funcionan como controles que permiten a los usuarios mostrar u ocultar las secciones de contenido asociadas. Roles, estados y propiedades WAI-ARIA:

Un dropdown es un elemento que, al ser activado, muestra un menú de opciones u otra información, de forma que el usuario puede seleccionar la opción que desee. El lector de pantalla interpreta el dropdown como un selector; dependiendo de su construcción, puede ser desplegado usando pseudoclases de CSS como :hover o :focus. O usando…

El skip-link está en la parte superior de la página, pero está «oculto». Las personas con visión normal no lo verán. El enlace se «activará» al navegar por la página con el botón Tab justo después de cargar la página. Podemos aprovechar el estado :focus de este enlace. En cuanto el enlace esté enfocado, lo…

Un radiogroup es un conjunto de botones seleccionables, conocidos como botones de radio, en el que no se puede seleccionar más de uno a la vez. Algunas implementaciones pueden inicializar el conjunto con todos los botones sin marcar para forzar al usuario a marcar uno de los botones antes de pasar de un cierto punto…

WAI-ARIA soporta dos tipos de casillas de verificación: casillas de doble estado que alternan entre dos opciones — marcada y no marcada — y casillas de tres estados, que permiten un tercer estado adicional conocido como parcialmente marcada. Casillas dobles: Casillas 3 Estados: Roles, estados y propiedades WAI-ARIA

Se utiliza para crear controles interactivos para formularios basados en web con el fin de aceptar datos del usuario; existe una gran variedad de tipos de datos de entrada y widgets de control. Para hacer los inputs accesibles, usaremos las etiquetas <label> tratando de ser lo más explícitos posible. Establecemos una conexión entre el input…

Proporcionan una referencia interactiva a un recurso. El recurso de destino puede ser externo o local, es decir, fuera o dentro de la página o aplicación actual. Nota: Para que el lector de pantalla enfoque los enlaces, es necesario que se coloque el atributo href, ya sea con el link para redireccionar la página (href=»https://faq.databyte.cl/»)…

Un botón es un widget que permite a los usuarios activar una acción o evento, como enviar un formulario, abrir un cuadro de diálogo, cancelar una acción o realizar una operación de eliminación. Además del widget de botón normal, WAI-ARIA admite otros 2 tipos de botones: Botón Toggle: Botón de dos estados que puede estar…

La mayoría de las páginas que creamos tienen una estructura común: un encabezado, una navegación principal, un área donde va el contenido, tal vez un área en el borde con información adicional y un pie de página. Algo como esto: Al clasificar y etiquetar las secciones de una página, permiten representar mediante programación la información estructural…