Bootstrap modal schließen Taste aria-hidden=true

Question

Laut dem Bootstrap-Dokument bedeutet das Hinzufügen von aria-hidden="true", dass Hilfstechnologien die DOM-Elemente des Modals überspringen sollen, was die Verwendung von aria-hidden=true im Haupt-modal div erklärt.

Was ist der Zweck von aria-hidden=true für die Schaltfläche zum Schließen des Modals im modal-header div?

      **<*div class="modal-header">
        ×       
        Titel des Modals
      ***

        ...

        Schließen
        Änderungen speichern

Answer 1

ARIA-Attribute werden verwendet, um das Web für Menschen mit Behinderungen zugänglicher zu machen, insbesondere für diejenigen, die Bildschirmlesegeräte verwenden. Mit dem Vorteil des Sehens können wir sehen, dass das × (x) Symbol als 'X' verwendet wird, was darauf hindeutet, dass der Modal geschlossen wird, wenn Sie darauf klicken. Für jemanden, der ein Bildschirmlesegerät verwendet, wenn das Modal entsprechend eingerichtet ist:

×

Wenn ein Bildschirmlesegerät dieses Code liest, wird es einfach nur "Schließen-Schaltfläche" vorlesen.

---

×

×

Beide führen zu demselben Ergebnis, wenn sie vom Bildschirmlesegerät gelesen werden, das "Schließen-Multiplikationssymbol-Schaltfläche" oder etwas Ähnliches sagt.

---

×

In diesem letzten Fall wird durch das Hinzufügen von aria-hidden="true" zur Schaltfläche selbst das Bildschirmlesegerät gezwungen, die gesamte Schließen-Schaltfläche zu ignorieren, sodass der Benutzer weiterlesen muss, um die Schließen-Schaltfläche im Footer zu finden (falls es eine Schließen-Schaltfläche im Footer gibt, wenn nicht, wird es schwierig sein, es zu schließen).

Die Funktionalität für den typischen Webbenutzer ist in all diesen Beispielen gleich, aber für einen Teil der Bevölkerung kann es einen Unterschied machen, ob auf das Design, das Layout und die Tag-Platzierung geachtet wird, zwischen einer häufig besuchten Website und einer Website, die nie wieder besucht wird.

I know I kind of went off topic here, but when using aria-attributes, just pretend you are running a screen reader and visually see the content, content that can only be understood visually should have aria-hidden tags on it, and the ARIA tag system provides many more types of tags for providing additional information to those who need it, including having elements visible only to screen readers.

Für mehr Informationen: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Answer 2

Der Zweck von aria-hidden auf der Schaltfläche zum Schließen besteht darin, dass in dieser Markierung das "X" oder das "times"-Symbol Bildschirmvorlesegeräten nicht viel mitteilen wird.

Um es barrierefrei zu machen, sollte die Schaltfläche zum Schließen ungefähr so aussehen:

  ×
  Schließen

Und den .hide-Inhalt visuell mit CSS ausblenden.

Answer 3

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 wie folgt aussehen

 ×    

oder

×

Answer 4

Die Antwort von Daniel Enkel sollte als akzeptierte Antwort markiert werden.

Um noch etwas hinzuzufügen: Bootstrap bietet auch die Klasse sr-only an, um "Accessibility"-Elemente zu verstecken.

×

Schließen

Vielen Dank an Gode Agarunov für deine sehr informative Antwort und das aria-label. Ich denke, es macht mehr Sinn, ein Element für die Barrierefreiheit hinzuzufügen, anstatt ein neues Element in das vorhandene zu verschachteln.