5.2: Botones de alternar (Ejemplo de actividad)

El resto de la instrucción aquí es práctica. Tomarás widgets inaccesibles, como el ejemplo de los botones de alternancia que se describen aquí, y los harás accesibles agregando WAI-ARIA y operabilidad del teclado apropiados. El widget de botones de alternancia que se muestra aquí se proporciona como ejemplo para los diez widgets en los que trabajarás en las siguientes tres unidades, describiendo los Elementos de Actividad que encontrarás en cada ejercicio.

Elemento de actividad: Después de la breve introducción al widget anterior, se enumera una lista de los roles, estados y propiedades de WAI-ARIA utilizados con el widget.

Roles, estados y propiedades para botones de alternar

• role=” botón”
• tabindex=” 0″
• aria-label=” [nombre del botón]”
• aria-presionado=” [verdadero|falso]”

Elemento de actividad: Cuando esté disponible, se incluye una Lectura sugerida que proporciona información adicional sobre las características de accesibilidad para el widget que se está discutiendo, a menudo enlazando a la documentación W3C WAI-ARIA 1.1 Authoring Practice, o a un recurso similar. Estas lecturas son opcionales pero recomendadas.

Lectura sugerida: Lea más sobre los botones en las prácticas de autoría de WAI-ARIA 1.1.

Elemento de actividad: Cada widget tendrá una versión inaccesible de JSFiddle proporcionada, como la que aparece a continuación. Puede examinar el JavaScript y el HTML para observar cómo se creó el widget. En la pestaña Resultado, vea y pruebe el widget para ver cómo funciona. También se proporciona CSS, aunque no trabajarás con CSS como parte de las actividades. En el JSFiddle aquí, los elementos de accesibilidad están incluidos pero comentados para que puedas ver cómo se han aplicado los fragmentos de código a continuación. En las actividades que siguen, los elementos de accesibilidad no estarán presentes. Tu tarea será aplicar los fragmentos de código tú mismo para hacer accesible la versión inaccesible proporcionada en el archivo de actividad.

En la parte superior derecha, puede optar por “Editar en JSFiddle” y probar los fragmentos de código que se proporcionarán a continuación, para comprender cómo agregan accesibilidad al widget. Puede comenzar descomentando los elementos de accesibilidad para los botones de alternancia y probando la versión resultante con ChromeVox.

El siguiente JSFiddle presenta un típico botón de alternar. Revise el marcado JavaScript y HTML. Pruebe los botones presentes en la pestaña Resultado con ChromeVox para entender cómo funciona sin agregar ninguna característica de accesibilidad (si funciona). Puedes trabajar en el propio JSFiddle haciendo clic en “Editar en JSFiddle” y copiando el código de Accesibilidad/Wai-aria que se describe a continuación para corregir la accesibilidad de los botones de alternancia, antes de completar la Actividad en la página que sigue (no hay actividad que siga en este caso de ejemplo). Saltar JSFiddle

Punto clave: El código que aparece debajo de la pestaña JavaScript no es exactamente como aparece en los archivos de actividad. La función $ (document.ready {}) en la parte superior se copia del archivo HTML asociado para el widget, y se ha agregado el contenido de ik_util.js, por lo que el widget funcionará en JSFiddle. No necesitarás incluirlos en el archivo JavaScript de los archivos de actividad que vas a editar para cada widget.

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

Elemento de Actividad: Siguiendo el JSFiddle habrá una colección de fragmentos de código alojados en PasteBin. Estos fragmentos de código se pueden aplicar al código presentado en el JSFiddle y aplicarse al código en los archivos de actividad, que estará enviando para marcar.

Agrega un tabindex a cada botón para que sean enfocables por teclado, define el role="button”, y agrega una etiqueta con aria-label= "[nombre del botón]” y establece el estado predeterminado en “no presionado” con aria-pressed="false”.

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

Agregue acceso de teclado equivalente donde se proporciona acceso del mouse, haciendo referencia a la función onActivate (), descrita a continuación, con jQuery .on ('keydown').

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

Establece aria-pressed= "[true|false]” para los botones cuando se activan o desactivan para anunciar el estado del botón a los lectores de pantalla.

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

Adición de operabilidad del teclado

El acceso al teclado para los botones es bastante simple, sin que sea necesario definir eventos especiales de pulsación de teclas.

Elemento de actividad: Cuando las prácticas de autoría WAI-ARIA 1.1 tengan un conjunto de interacciones de teclado recomendadas, se reproducirán aquí. Los widgets suelen seguir la práctica recomendada, aunque en algunos casos la interacción del teclado puede variar.

Interacción del teclado para botones de alternar

Cuando el botón tiene foco:

• Espacio: Activa el botón.
• Entrar: Activa el botón.
• Después de la activación del botón, el enfoque se establece dependiendo del tipo de acción que realice el botón. Por ejemplo:
  • Si al activar el botón se abre un diálogo, el foco se mueve dentro del diálogo (ver patrón de diálogo).
  • Si al activar el botón se cierra un diálogo, el enfoque suele volver al botón que abrió el diálogo a menos que la función realizada en el contexto del diálogo conduzca lógicamente a un elemento diferente. Por ejemplo, activar un botón de cancelación en un diálogo devuelve el foco al botón que abrió el diálogo. No obstante, si el diálogo estuviera confirmando la acción de eliminar la página desde la que se abrió, el foco se movería lógicamente a un nuevo contexto.
  • Si activar el botón no descarta el contexto actual, entonces el enfoque generalmente permanece en el botón después de la activación, por ejemplo, un botón Aplicar o Recalcular.
  • Si la acción del botón indica un cambio de contexto, como pasar al siguiente paso en un asistente o agregar otros criterios de búsqueda, a menudo es apropiado mover el enfoque al punto de inicio de esa acción.
  • Si el botón se activa con una tecla de método abreviado, el enfoque generalmente permanece en el contexto desde el que se activó la tecla de método abreviado. Por ejemplo, si Alt + U se asignara a un botón “Arriba” que mueve el elemento actualmente enfocado en una lista una posición más alta en la lista, presionar Alt + U cuando el foco está en la lista no movería el foco de la lista.

Fuente: W3C WAI-ARIA 1.1 Prácticas de autoría

Elemento de actividad: Aunque este widget no requiere interacción de teclado más allá de la proporcionada en ik_utils.js para manejar la barra espaciadora y las teclas Enter, otros widgets tendrán una función personalizada proporcionada aquí que define posibles interacciones de teclado para esos widgets. En la mayoría de los casos, ese código se puede copiar tal cual en el archivo JavaScript del widget.

No se requiere ninguna interacción adicional con el teclado para los botones de alternar más allá de la barra espaciadora estándar y la tecla Enter definidas en el archivo ik_utils.js. La referencia a estos eventos clave se agrega a la función onActivate ().

Un enlace a un elemento interactivo se puede encontrar en la parte inferior de esta página.

Botones de alternancia accesibles en acción

Elemento de actividad: Cada widget tendrá un breve video del mismo interactuando con ChromeVox. Al completar las actividades, procura que tu función de envío de actividades sea como se presenta en el video.

Inicialmente se accede a los botones con la tecla Tab, y la tecla Tab se usa para moverse entre botones. La barra espaciadora o las teclas Enter se utilizan para activar y desactivar botones. Apunta a tener el widget que editas en la función de actividad asociada como el que se presenta en el video (no hay actividad asociada para este ejemplo).

Video: Botones de palanca accesibles

Un elemento de YouTube ha sido excluido de esta versión del texto. Puedes verlo en línea aquí: https://pressbooks.library.ryerson.ca/wafd/?p=324