carlosm
En el siguiente ejemplo, un botón tiene un estilo que parece un botón de “cerrar” típico, con una X en el medio. Dado que no hay nada que indique que el propósito del botón es cerrar el cuadro de diálogo, el atributo aria-label se usa para proporcionar la etiqueta a cualquier tecnología de asistencia.
<button aria-label="Close" onclick="myDialog.close()">X</button>
Según la documentación de Bootstrap:
Oculte un elemento para todos los dispositivos, excepto los lectores de pantalla con solo .sr
Así que supongo que también podría escribir:
<button onclick="myDialog.close()"><span class="sr-only">Close</span>X</button>
En un proyecto Bootstrap, ¿cómo puedo elegir cuál preferir?
En el ejemplo de MDN, un lector de pantalla solo dirá la palabra “cerrar” ya que aria-label anula el texto en el botón. Esto funcionará incluso si reutiliza el código sin Bootstrap.
En su ejemplo, un lector de pantalla dirá “cerrar x” ya que no está haciendo nada para ocultar la “x” de los lectores de pantalla. También está agregando un nodo de texto para luego ocultarlo con una clase.
Yo usaría el ejemplo de MDN.
-
Realmente depende del lector de pantalla/cliente de texto a voz. Primero consultaría estos artículos, pero tenga en cuenta que es posible que ya estén desactualizados: (1) Enlaces de texto: mejores prácticas para lectores de pantalla; (2) Caso de prueba de accesibilidad de atributo title y aria-label.
– thdoan
28 de febrero de 2017 a las 2:50
La clase sr-only La clase es para bloques completos de contenido de texto que solo son útiles para aquellos que usan un lector de pantalla y deben ocultarse de los demás.
Un ejemplo de una aplicación en la que estoy trabajando proporciona instrucciones para usar un controlador accesible con la aplicación web:
<div class="sr-only">
When voting with the text-to-speech audio, use the accessible
controller to navigate your ballot. To navigate through the
contests, use the left and right buttons. To navigate through
contest choices, use the up and down buttons. To select or
unselect a contest choice as your vote, use the select button.
</div>
En su ejemplo, simplemente desea proporcionar un contenido de texto diferente para un lector de pantalla. Para responder a su pregunta específica, use el ejemplo de MDN.
He usado aria-labels para indicarle a un lector de pantalla cuándo agregar pausas agregando títulos con puntos o comas como sufijo según sea necesario (más información sobre la pausa en un lector de pantalla para accesibilidad):
<h1 aria-label="Hello World.">
Hello World
</h1>
sr-onlyno tiene nada que ver con la accesibilidad. Es solo se esconde el elemento excepto los lectores de pantalla. No significa que automáticamente haga que el elemento sea compatible con el lector de pantalla.– SR verde
30 de agosto de 2016 a las 18:11
Tenga en cuenta que en BS4
.sr-onlyha sido reemplazado por<button aria-label="Close"><span aria-hidden="true">X</span></button>en el código.– thdoan
28 de febrero de 2017 a las 2:49
@thdoan ¿Conoce el propósito de aria-hidden=”true” dentro del botón? aria-label lo sobrescribe donde lo he probado.
– ernesto
6 de marzo de 2020 a las 10:43
@ernsto
aria-hidden="true"evitará que un lector de pantalla lea el contenido dentro de ese elemento. Entonces, el lector de pantalla solo leerá ‘Cerrar’ en el ejemplo de @thdoan (en lugar de ‘Cerrar X’).– Matty J.
15 dic 2021 a las 22:50