it-swarm.com.de

bootstrap-Modal-Schaltfläche zum Schließen aria-hidden = true

Gemäß dem Bootstrap-Dokument weist das Hinzufügen von aria-hidden="true" Hilfstechnologien an, die DOM-Elemente des Modals zu überspringen, was das Vorhandensein von aria-hidden=true im Haupt-modal div erklärt.

Was ist der Zweck des Hinzufügens von aria-hidden=true für die modale Schließschaltfläche im 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

Der Zweck der Aria-verborgenen Schaltfläche beim Schließen ist, dass das "X" - oder "Times" -Symbol den Screenreadern nicht viel sagt.

Um es zugänglich zu machen, sollte der Schließen-Button ungefähr so ​​aussehen:

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

Und blenden Sie den Inhalt der .hide mit CSS visuell aus.

19

ARIA-Attribute werden verwendet, um das Internet für Menschen mit Behinderungen zugänglicher zu machen, insbesondere für Bildschirmlesegeräte. Mit Blick auf das Sehen kann man sehen, dass das Symbol × (x) als 'X' verwendet wird. Dies bedeutet, dass das Modal geschlossen wird, wenn Sie darauf klicken. Für jemanden, der einen Screenreader verwendet, wenn der Modal entsprechend eingerichtet ist:

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

Wenn ein Bildschirmleser diesen Code durchläuft, liest er einfach "Close Button".


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

Beide führen zu demselben Ergebnis, wenn sie vom Bildschirmleser gelesen werden, indem sie die Schaltfläche "Multiplikationssymbol schließen" oder etwas anderes dazu sagen.


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

In diesem letzten Fall wird durch Hinzufügen von aria-hidden = "true" zur Schaltfläche selbst der gesamte Bildschirmschalter ignoriert. Der Benutzer muss dann die Fußzeile lesen, bevor er die Schaltfläche "Schließen" findet Wenn die Fußzeile nicht vorhanden ist, wird es schwer werden, sie zu schließen.

Die Funktionalität für den typischen Webbenutzer ist in allen diesen Beispielen gleich. Bei einem Teil der Bevölkerung kann die Beachtung und Berücksichtigung von Design, Layout und Platzierung der Tags den Unterschied zwischen einer häufig besuchten Website und einer nie besuchten Website darstellen nochmal.

Ich weiß, dass ich mich hier vom Thema abgewandt habe, aber wenn Sie Aria-Attribute verwenden, tun Sie einfach so, als würden Sie einen Screenreader ausführen und sehen visuell den Inhalt. Inhalte, die nur visuell verstanden werden können, sollten über aria-verborgene Tags und die ARIA verfügen Das Tag-System bietet viele weitere Arten von Tags, um denjenigen, die sie benötigen, zusätzliche Informationen zur Verfügung zu stellen, darunter Elemente, die nur für Bildschirmleseprogramme sichtbar sind.

Weitere Informationen: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

18
Gode Agarunov

Nicht sicher, ob dies beantwortet wurde, aber ich hatte kürzlich dieses Problem und dies war meine Antwort. Ich hoffe, es hilft.

ein Schließen-Button könnte so aussehen

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

oder 

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

@Daniel Grandsons Antwort sollte die akzeptierte Antwort sein.

um nur etwas hinzuzufügen: Bootstrap stellt auch die Klasse sr-only bereit, um "accessibility" -Elemente auszublenden.

<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 - Vielen Dank für Ihre sehr informative Antwort und das Aria-Label . Ich denke, es ist sinnvoller, ein Element für die Barrierefreiheit hinzuzufügen, anstatt ein neues Element mit dem vorhandenen zu verschachteln.

0
TomerBu