twitter bootstrap - form - botón de cierre modal de arranque aria-hidden=true

ventana modal automatica css

Question

Según el documento bootstrap , agregar aria-hidden="true" indica a las tecnologías asistenciales que omitan los elementos DOM del modal, 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 -->

Answer 1

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

Para hacer que sea accesible, el botón de cerrar debería verse más o menos así:

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

Y oculte visualmente el contenido .hide con CSS.

Answer 2

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 cerrar 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>

Answer 3

Los atributos de ARIA se utilizan para hacer que la web sea más accesible para las personas con discapacidades, en particular las que utilizan lectores de pantalla. Con el beneficio de la vista, podemos ver que el símbolo × (x) se usa 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 revisa este código, se 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 lo lea el lector de pantalla, diciendo "Cerrar el botón de símbolo de multiplicación" o algo por el estilo.

<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 hará que el lector de pantalla ignore todo el botón de cerrar, lo que obligará al usuario a continuar leyendo al pie de página antes de encontrar el botón de cerrar (si hay un botón de cerrar en el pie de página, si no es así, van a tener 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 colocación de etiquetas podría ser la diferencia entre un sitio web visitado con frecuencia y un sitio web nunca visitado de nuevo.

Sé que me quedé fuera del tema aquí, pero cuando utilizo los atributos de aria, pretendo que está ejecutando un lector de pantalla y visualmente veo el contenido, el contenido que solo puede entenderse visualmente debe tener etiquetas escondidas en aria, y el ARIA el sistema de etiquetas proporciona muchos más tipos de etiquetas para proporcionar información adicional a quienes las necesitan, incluso tener elementos visibles solo para lectores de pantalla.

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

Answer 4

La respuesta de @ Daniel Grandson debería 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 para la accesibilidad en lugar de anidar un elemento nuevo al existente.