Was sind diese Attribute: "Aria-Labelledby" und "Aria-Hidden"

Mit Bootstrap Modal habe ich diese ariaAttribute oft gesehen , aber ich wusste nie, wie ich sie verwenden sollte.

Weiß jemand, in welchen Fällen diese Attribute verwendet werden sollen? Ich googelte - fand einfach keine eindeutigen Antworten.

Das HTML5 ARIA- Attribut ist genau das , wonach Sie suchen. Es kann in Ihrem Code auch ohne Bootstrap verwendet werden.

Accessible Rich Internet Applications (ARIA) definiert Möglichkeiten, um Webinhalte und Webanwendungen (insbesondere solche, die mit Ajax und JavaScript entwickelt wurden) für Menschen mit Behinderungen zugänglicher zu machen.

Um genau zu sein, werden Ihre Attribute als ARIA-Attributzustände und -Modell bezeichnet

aria-labelledby: Identifiziert das Element (oder die Elemente), die bzw. das das aktuelle Element kennzeichnet.

aria-hidden (state): Zeigt an, dass das Element und alle seine Nachkommen für keinen Benutzer sichtbar oder wahrnehmbar sind, wie vom Autor implementiert.

Die Hauptkonsumenten dieser Eigenschaften sind Benutzeragenten wie Bildschirmleseprogramme für Blinde. Im Fall eines Bootstrap-Modals hat das Modal divalso role="dialog". Wenn der Bildschirmleser bemerkt, dass ein divsichtbar wird, das diese Rolle spielt, spricht er die Bezeichnung dafür div.

Es gibt viele Möglichkeiten, Dinge zu beschriften (und einige neue mit ARIA), aber in einigen Fällen ist es angebracht, ein vorhandenes Element als Beschriftung (semantisch) zu verwenden, ohne das <label>HTML-Tag zu verwenden. Bei HTML-Modalen ist die Bezeichnung normalerweise eine <h>Kopfzeile. Im Fall des Bootstrap-Modals fügen Sie hinzu aria-labelledby=[IDofModalHeader], und der Bildschirmleser spricht diesen Header, wenn das Modal angezeigt wird.

Im Allgemeinen wird ein Bildschirmleser feststellen, wann DOM-Elemente sichtbar oder unsichtbar werden. Daher ist die aria-hiddenEigenschaft häufig redundant und kann wahrscheinlich in den meisten Fällen übersprungen werden.

aria-hidden="true"versteckt dekorative Elemente wie Glyphikonsymbole vor Bildschirmlesern, die keine aussagekräftige Aussprache haben, um keine Verwirrungen zu verursachen. Es ist eine schöne Sache, wenn es um gute Praxis geht.

ARIA ändert die Funktionalität nicht, sondern nur die dargestellten Rollen / Eigenschaften für Benutzer von Bildschirmleseprogrammen. Die WAVE-Symbolleiste von WebAIM identifiziert ARIA-Rollen auf der Seite.

Aria wird verwendet, um die Benutzererfahrung von sehbehinderten Benutzern zu verbessern. Benutzer mit Sehbehinderung navigieren mit einer Bildschirmlese-Software wie JAWS, NVDA usw. durch die Anwendung. Während der Navigation durch die Anwendung kündigt die Bildschirmlese-Software den Benutzern Inhalte an. Mit Aria können dem Code Inhalte hinzugefügt werden, mit denen Benutzer von Bildschirmleseprogrammen die Rolle, den Status, die Bezeichnung und den Zweck des Steuerelements verstehen können

Aria ändert visuell nichts. (Aria hat auch Angst vor Designern).

Arie versteckt:

Das Attribut aria-hidden wird verwendet, um Inhalte für sehbehinderte Benutzer auszublenden, die mit Bildschirmleseprogrammen (JAWS, NVDA, ...) durch die Anwendung navigieren.

Das Attribut aria-hidden wird mit den Werten true und false verwendet.

Wie benutzt man:

<i class = "fa fa-books" aria-hidden = "true"></i>

Die Verwendung von aria-hidden = "true" für den ausgeblendeten <i>Inhalt für Benutzer von Bildschirmleseprogrammen ohne visuelle Änderung in der Anwendung.

Arien-Label

Das Attribut aria-label wird verwendet, um das Label den Benutzern des Bildschirmlesegeräts mitzuteilen. Normalerweise hat das Sucheingabefeld keine visuelle Beschriftung (dank Designern). Mit aria-label kann das Label der Steuerung den Benutzern des Bildschirmlesegeräts mitgeteilt werden

Wie benutzt man:

<input type = "edit" aria-label = "search" placeholder = "search">

Es gibt keine visuelle Änderung in der Anwendung. Aber Bildschirmleser können den Zweck der Kontrolle verstehen

Arie-beschriftet von

Sowohl das Arienetikett als auch das Arienetikett werden verwendet, um das Etikett zu kommunizieren. Aber aria-labelledby kann verwendet werden, um auf jedes bereits auf der Seite vorhandene Etikett zu verweisen, während aria-label verwendet wird, um das Etikett zu kommunizieren, das ich nicht visuell angezeigt habe

Ansatz 1:

<span id = "sd"> Search </span>

<input type = "text" aria-labelledby = "sd">

aria-labelledby kann auch verwendet werden, um zwei Beschriftungen für Benutzer von Bildschirmleseprogrammen zu kombinieren

Ansatz 2:

<span id = "de"> Billing Address </span>

<span id = "sd"> First Name </span>

<input type = "text" aria-labelledby = "de sd">