bootstrap modal botón cerrar aria-hidden=true

Como por el bootstrap documento, añadiendo aria-hidden="true" dice tecnologías de apoyo para saltar el modal de elementos del DOM, lo que explica la presencia de aria-hidden=true en el principal modal div.

¿Cuál es el propósito de la adición de aria-hidden=true para el modal botón cerrar en la 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 -->
InformationsquelleAutor Reshma | 2014-01-18

4 Kommentare

  1. 22

    ARIA Atributos se utilizan para hacer la web más accesibles para las personas con discapacidad, especialmente aquellas que utilizan lectores de pantalla. Con el beneficio de vista, podemos ver que el × (x) símbolo se utiliza como una ‘X’, lo que indica que si hace clic en el modal se cerrará. Para alguien que usa un lector de pantalla, si el modal es configurar adecuadamente:

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

    Cuando un lector de pantalla va a través de este código, se va a leer simplemente leer «Botón de Cierre».


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

    Ambas conducen al mismo resultado cuando es leído por el lector de pantalla, es decir «Cerca de la Multiplicación Botón con el Símbolo» o algo a ese efecto.


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

    En este último caso, la adición de aria-hidden=»true» en el botón de sí mismo hará que el lector de pantalla ignorar todo el botón cerrar, obligando al usuario a seguir leyendo al pie de página antes de encontrar el botón de cierre (Si es que hay un botón de cierre en el pie de página, si no la hay, van a tener un tiempo difícil cerrarla)

    La funcionalidad para el típico usuario de la web es el mismo en todos estos ejemplos, pero para un segmento de la población, teniendo cuidado y consideración en el diseño, la maquetación y de la etiqueta la colocación puede ser la diferencia entre un sitio web visitados y un sitio web nunca visitó de nuevo.

    Sé que me fui fuera de tema aquí, pero cuando se utiliza aria-atributos, simplemente pretender que usted está ejecutando un lector de pantalla y ver visualmente el contenido, el contenido que sólo puede ser entendido visualmente debe tener aria-etiquetas ocultas en ella, y el ARIA de la etiqueta de sistema proporciona muchos más tipos de etiquetas para proporcionar información adicional para aquellos que lo necesitan, incluyendo el hecho de tener elementos visibles sólo para los lectores de pantalla.

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

  2. 19

    El propósito de la aria-hidden en el botón de cierre que en el marcado de la «X» o «tiempos»-símbolo no decirle a los lectores de pantalla mucho.

    Para hacer accesible el botón de cierre debe ser algo como esto:

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

    Y ocultar visualmente el .ocultar contenido con CSS.

    • hola @Daniel ,yo sólo quiero preguntarle ¿por qué utilizar aria-hidden ?si me lo quite que también su trabajo como es.
    • Utilizamos aria-hidden para ocultar el X / &times; para los lectores de pantalla no anunciar «x» o «tiempos», y agregar visualmente el texto oculto «Cerrar» para que los lectores tengan una etiqueta adecuada para el botón.
  3. 0

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

    un botón de cerrar este aspecto

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

    o

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

    @Daniel Nieto‘s respuesta debe ser aceptada respuesta.

    sólo para añadir un poco de algo: Bootstrap también proporciona la sr-sólo clase para ocultar la «accesibilidad» de los elementos.

    <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 tu respuesta informativa y aria-label.
    Creo que tiene más sentido para añadir un elemento para la accesibilidad en lugar de anidación de un nuevo elemento a la existente.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Recent Articles

Python «set» con duplicados/elementos repetidos

Hay una forma estándar de representar un "conjunto" que puede contener elementos duplicados. Como yo lo entiendo, un conjunto tiene exactamente un cero o...

Python: generador de expresión vs rendimiento

En Python, ¿hay alguna diferencia entre la creación de un generador de objetos a través de un generador de expresión versus el uso de...

Cómo exportar/importar la Masilla lista de sesiones?

Hay una manera de hacer esto? O tengo que tomar manualmente cada archivo de Registro? InformationsquelleAutor s.webbandit | 2012-10-23

no distingue mayúsculas de minúsculas coincidentes en xpath?

Por ejemplo, para el xml a continuación <CATALOG> <CD title="Empire Burlesque"/> <CD title="empire burlesque"/> <CD...