web-dev-qa-db-fra.com

bouton de fermeture modal bootstrap aria-hidden = true

Selon le document d'amorçage , l'ajout de aria-hidden="true" indique aux technologies d'assistance de sauter les éléments DOM du modal, ce qui explique la présence de aria-hidden=true dans le modal div principal.

Quel est le but d'ajouter aria-hidden=true pour le bouton de fermeture modale dans le 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 -->
twitter-bootstrapmodal-dialogaccessibilityscreen-readers
18
Reshma

Le but de la commande aria-hidden sur le bouton de fermeture est que, dans cette balise, le symbole "X" ou "times" ne dit pas grand chose aux lecteurs d'écran.

Pour le rendre accessible, le bouton de fermeture devrait ressembler à ceci:

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

Et masquer visuellement le contenu .hide avec CSS.

19
Daniel Göransson

Les attributs ARIA sont utilisés pour rendre le Web plus accessible aux personnes handicapées, en particulier à celles qui utilisent des lecteurs d'écran. Avec l'avantage de la vue, nous pouvons voir que le symbole × (x) est utilisé comme un «X», indiquant que si vous cliquez dessus, le modal se fermera. Pour quelqu'un utilisant un lecteur d'écran, si le modal est configuré de manière appropriée:

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

Quand un lecteur d’écran passe au dessus de ce code, il lit simplement "Bouton Fermer".

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

Les deux entraînent le même résultat lorsqu’ils sont lus par le lecteur d’écran, il dit "Fermer le bouton du symbole de multiplication" ou quelque chose du genre.

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

Dans ce dernier cas, l'ajout de aria-hidden = "true" au bouton lui-même fera en sorte que le lecteur d'écran ignore tout le bouton de fermeture, obligeant ainsi l'utilisateur à poursuivre la lecture en pied de page avant de trouver le bouton de fermeture (S'il y a un bouton de fermeture le pied de page, s'il n'y en a pas, ils vont avoir du mal à le fermer)

La fonctionnalité pour l'internaute typique est la même dans tous ces exemples, mais pour un segment de la population, la conception, la mise en page et le placement des balises peuvent prendre la différence entre un site Web fréquemment visité et un site Web jamais visité. encore.

Je sais que je suis en quelque sorte sorti du sujet ici, mais lorsque vous utilisez les attributs aria, prétendez que vous utilisez un lecteur d'écran et que vous voyez visuellement le contenu, le contenu qui ne peut être compris que visuellement devrait avoir des balises aria-hidden, et l'ARIA Le système de balises fournit beaucoup plus de types de balises pour fournir des informations supplémentaires à ceux qui en ont besoin, y compris des éléments visibles uniquement par les lecteurs d'écran.

Pour plus d'informations: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

18
Gode Agarunov

Pas sûr si cela a été répondu cependant j'ai récemment eu ce problème et c'était ma réponse, espérons que cela aide.

un bouton de fermeture pourrait ressembler à ceci

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

ou 

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

La réponse de @Daniel Grandson devrait être la réponse acceptée.

juste pour ajouter un petit quelque chose: Bootstrap fournit également la classe sr-only pour cacher les éléments "d'accessibilité".

<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 - Merci pour votre réponse très informative et aria-label . Je pense qu'il est plus judicieux d'ajouter un élément d'accessibilité plutôt que d'imbriquer un nouvel élément dans l'élément existant.

0
TomerBu