Si un elemento HTML tiene role = “button”, también debería tener el atributo “name”

Si un elemento HTML5

requiere un atributo role="button" para asegurar un resultado exitoso en una auditoría de accesibilidad (Criterio de éxito 4.1.2 [Nombre, Rol, Valor] … el div actúa como un botón en una IU) , ¿también requiere un atributo de name válido (que normalmente sería un HTML5 no válido para un div )?

Si la respuesta es no, ¿qué otro atributo amigable de accesibilidad puedo agregar para describir el botón div y cumplir los criterios? ¿Un simple atributo de title o aria-label ?

Creo que la pregunta original surgió debido a cierta confusión sobre lo que significa “nombre” en “WCAG 4.1.2 Nombre, función, valor”.

El atributo name = realmente no es válido en un

. El nombre = se usa para nombrar un objeto para que pueda ser referenciado en javascript. No tiene nada que ver con la accesibilidad.

El “nombre” en 4.1.2 se refiere a lo que llamará el objeto el lector de pantalla y otras tecnologías de asistencia. Para los botones, generalmente es el texto que se muestra en el botón. Para campos de entrada, generalmente es la etiqueta del campo. Si tiene un

, entonces como lo señalaron otros, la aria-label es cómo “nombraría” el objeto.

Cuando el foco va al objeto, la mayoría de los lectores de pantalla leerán el nombre / etiqueta del objeto, el rol (botón, checkbox, cuadro combinado, tabla, etc.) y el valor o estado del objeto si corresponde (entrada, combobox, checkbox estado).

Esos tres elementos de información se determinan rápidamente a simple vista y básicamente le brindan toda la información que necesita saber sobre un objeto. Esa misma información debería aparecer en la tecnología asistencial.

El atributo de name no existe para

y no se puede agregar.

Necesitará aria-label para proporcionar un nombre accesible.

Sin embargo , si solo está tratando de obtener un pase en SC 4.1.2, entonces probablemente se haya acercado a esto de la manera incorrecta. De hecho, si no puede probar la aria-label en un lector de pantalla para confirmar que funciona de la manera que desea, entonces está codificando una lista de verificación en lugar de ayudar realmente a los usuarios.

Si ese es el caso, entonces probablemente debería deshacerse de su

y en su lugar comenzar con el elemento más correcto para el trabajo.

Una buena regla empírica es nunca ponerse en una situación en la que esté cambiando la semántica predeterminada de un elemento (a través del role ).

Ya hay tres elementos que pueden hacer lo que quieras primero. En ausencia de contexto para su pregunta, algunos consejos generales sobre cuándo usar un versus un o :

  • Si el usuario va a una página nueva (o ancla en la página), use un ( especificación ).
  • Si el usuario está cambiando un estado en la página actual, use ( spec ).
  • Si el usuario envía un formulario, use o ( spec ).

Advierto sobre el cambio de la función predeterminada de un elemento con el atributo de role , ya que en última instancia, puede causar cierta confusión y un posible conflicto para alguna tecnología de asistencia. Estos también violan las reglas primera y segunda del uso de ARIA.

Considere la experiencia del teclado también. Si todo lo que hace es cambiar el role de un elemento, entonces también debe proporcionar todos los scripts para permitir que se comporte como el nuevo elemento.

Se puede un hipervínculo ( ) presionando la tecla Intro. Pero un verdadero se puede disparar presionando la tecla enter o la barra espaciadora. Cuando un hipervínculo tiene foco y el usuario presiona la barra espaciadora, la página se desplazará una pantalla. Los usuarios de alguna tecnología de asistencia esperarán un comportamiento basado en el elemento utilizado.

Creo que también vale la pena mencionar que los eventos activados por una barra espaciadora solo se disparan cuando se suelta la tecla, mientras que usar la tecla Enter activará el evento tan pronto como presione la tecla (antes de soltarla).

Por lo tanto, comience con el elemento correcto para la tarea utilizando la lista anterior, luego ajústelo para que se vea como lo desee.

El name atributo no se puede agregar.

Los botones siempre deben tener un nombre accesible. Para la mayoría de los botones, este nombre será el mismo que el texto dentro del botón. En algunos casos, por ejemplo, para botones de icons, el nombre accesible se puede proporcionar a través de un atributo aria-label o aria-labelledby.

Por favor, consulte más detalles aquí: Uso del rol de botón