it-swarm.dev

bootstrap modal close button aria-hidden = true

Según el documento de arranque , agregar aria-hidden="true" le dice a las tecnologías de asistencia que omitan los elementos DOM modales, lo que explica la presencia de aria-hidden=true en el modal div principal.

¿Cuál es el propósito de agregar aria-hidden=true para el botón de cierre modal en el modal-header div?

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      **<*div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;       </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>***
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
18
Reshma

El propósito del aria-oculto en el botón de cerrar es que en ese marcado el símbolo "X" o "veces" no le dirá mucho a los lectores de pantalla.

Para que sea accesible, el botón de cierre debería verse así:

<button type="button" title="Close">
  <span aria-hidden="true">&times;</span>
  <span class="hide">Close</span>
</button>

Y oculta visualmente el contenido .hide con CSS.

19

Los atributos de ARIA se utilizan para hacer que la web sea más accesible para las personas con discapacidades, en particular las que usan lectores de pantalla. Con el beneficio de la vista, podemos ver que el símbolo × (x) se está utilizando como una 'X', lo que indica que si hace clic en él, el modal se cerrará. Para alguien que usa un lector de pantalla, si el modal está configurado apropiadamente:

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Cuando un lector de pantalla repasa este código, leerá simplemente "Cerrar botón".


<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button>

Ambos darán lugar al mismo resultado cuando el lector de pantalla lo lea, diga "Cerrar el botón del símbolo de multiplicación" o algo parecido.


<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">&times;</button>

En este último caso, agregar aria-hidden = "true" al botón en sí mismo hará que el lector de pantalla ignore todo el botón de cierre, lo que obligará al usuario a continuar leyendo el pie de página antes de encontrar el botón de cierre (si hay un botón de cierre en el pie de página, si no lo hay, tendrán dificultades para cerrarlo)

La funcionalidad para el usuario web típico es la misma en todos estos ejemplos, pero para un segmento de la población, tener cuidado y consideración en el diseño, diseño y ubicación de la etiqueta podría ser la diferencia entre un sitio web visitado con frecuencia y un sitio web nunca visitado. otra vez.

Sé que me salí del tema aquí, pero cuando utilizo aria-atributos, simplemente simule que está ejecutando un lector de pantalla y visualice visualmente el contenido, el contenido que solo puede entenderse visualmente debería tener etiquetas ocultas por aria, y el ARIA el sistema de etiquetas proporciona muchos más tipos de etiquetas para proporcionar información adicional a quienes la necesitan, incluido el hecho de que los elementos estén visibles solo para los lectores de pantalla.

Para obtener más información: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

18
Gode Agarunov

No estoy seguro si esto fue respondido, sin embargo recientemente tuve este problema y esta fue mi respuesta, espero que ayude.

un botón de cierre podría verse así

 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;    </button>

o

<button type="button" class="close" data-dismiss="modal">&times;</button>
0
Britnet

La respuesta de @ Daniel Grandson debe ser la respuesta aceptada.

solo para agregar algo: Bootstrap también proporciona la clase sr-only para ocultar elementos de "accesibilidad".

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<button type="button" class="sr-only" data-dismiss="modal">Dismiss</button>

@ Gode Agarunov - Gracias por su respuesta muy informativa y aria-label. Creo que tiene más sentido agregar un elemento de accesibilidad en lugar de anidar un elemento nuevo al existente.

0
TomerBu