Verbergen von Inhalten vor assistiven Technologien
Aria-verborgen
Eine weitere wichtige Technik zur Optimierung der Nutzererfahrung stellt sicher, dass nur relevante Teile der Seite Hilfstechnologien ausgesetzt sind. Es gibt mehrere Möglichkeiten sicherzustellen, dass ein Abschnitt des DOMs nicht für Bedienungshilfen-APIs verfügbar ist.
Zunächst einmal wird alles, was explizit aus dem DOM verborgen ist, nicht einbezogen.
im Baum für Barrierefreiheit. Alles mit dem CSS-Stil visibility:
hidden
oder display: none
oder mit dem HTML5-Attribut hidden
wird also auch
Nutzenden von Hilfstechnologien
nicht angezeigt werden.
Ein Element, das nicht visuell gerendert, aber nicht explizit ausgeblendet ist, die noch im Baum für Barrierefreiheit enthalten sind. Eine gängige Technik besteht darin, „Text nur für Screenreader“ in einem Element, das absolut außerhalb des Bildschirms positioniert ist.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
Außerdem ist es möglich, nur Text für Screenreader über eine
Attribut aria-label
, aria-labelledby
oder aria-describedby
, das auf ein
-Element, das ansonsten verborgen ist.
Weitere Informationen findest du in diesem WebAIM-Artikel über Techniken zum Verbergen. Text finden Sie weitere Informationen zum Erstellen von "Nur Screenreader". Text.
Schließlich bietet ARIA einen Mechanismus, um Inhalte von assistiven
die nicht mithilfe des Attributs aria-hidden
visuell verborgen ist.
Wenn Sie dieses Attribut auf ein Element anwenden, werden es und alle zugehörigen
Nachkommen aus dem Baum für Barrierefreiheit. Die einzige Ausnahme sind Elemente,
auf die durch ein aria-labelledby
- oder aria-describedby
-Attribut verwiesen wird.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
Sie können beispielsweise aria-hidden
verwenden, wenn Sie eine modale Benutzeroberfläche erstellen, die
den Zugriff auf die Hauptseite blockiert. In diesem Fall sieht der sehende Nutzer
halbtransparenten Overlays bedeutet, dass
der Großteil der Seite derzeit nicht
aber ein Screenreader-Nutzer kann möglicherweise trotzdem
der Seite. In diesem Fall und die Erstellung der Tastaturfalle erklärt
früher,
müssen Sie sicherstellen, dass die Teile der Seite,
sind ebenfalls aria-hidden
.
Sie kennen jetzt die Grundlagen von ARIA und wissen, wie ARIA mit nativem HTML funktioniert. Semantik und ihre Einsatzmöglichkeiten bei sehr großen Operationen am und die Semantik eines einzelnen Elements ändern, wie wir damit zeitkritische Informationen vermitteln können.
Aria Live
Mit aria-live
können Entwickler einen Teil der Seite als „Live“ markieren in dem Sinne, dass
Aktualisierungen sollten den Nutzenden sofort und unabhängig von der Seite
nicht einfach nur diesen Teil der Seite erkunden. Wann?
Ein Element ein aria-live
-Attribut hat, wobei der Teil der Seite, der es enthält, und
ihre Nachfolger werden als Live-Region bezeichnet.
![Mit ARIA Live wird eine Live-Region eingerichtet.](https://web.developers.google.cn/static/articles/hiding-and-updating-content/image/aria-live-establishes-li-acc61d8956fc7.jpg?authuser=6&hl=de)
Eine Live-Region kann z. B. eine Statusmeldung sein, die aufgrund einer
Nutzeraktion. Wenn die Botschaft wichtig genug ist, um die Anzeige eines sehenden Nutzers zu erfassen,
ist es wichtig genug, die Nutzenden von Hilfstechnologien
durch Festlegen des Attributs aria-live
Aufmerksamkeit erregen. Dieses div
-Objekt vergleichen
<div class="status">Your message has been sent.</div>
mit der „Live“-Version Gegenstück.
<div class="status" aria-live="polite">Your message has been sent.</div>
Für „aria-live
“ sind drei zulässige Werte zulässig: polite
, assertive
und off
.
aria-live="polite"
weist Hilfstechnologien an, den Nutzer darauf zu warnen ändern, wenn der aktuelle Vorgang beendet ist. Es ist hervorragend geeignet, wenn etwas wichtig, aber nicht dringend ist, und macht den Großteil deraria-live
verwenden.aria-live="assertive"
weist Hilfstechnologien an, alles zu unterbrechen und den Nutzer sofort über diese Änderung informieren. Dies gilt nur für wichtige und dringende Updates erhalten, beispielsweise eine Statusmeldung wie Serverfehler und Ihre Änderungen werden nicht gespeichert. aktualisieren Sie bitte die Seite.“ oder Aktualisierungen eines Eingabefelds als direkte Folge einer Nutzeraktion wie eines Stepper-Widgets.aria-live="off"
weist Hilfstechnologien an, sie vorübergehend zu deaktivierenaria-live
Unterbrechungen.
Es gibt einige Tricks, mit denen Sie sicherstellen können, dass Ihre Live-Regionen ordnungsgemäß funktionieren.
Die Region aria-live
sollte wahrscheinlich beim ersten Seitenaufbau festgelegt werden.
Das ist keine feste Regel. Wenn Sie aber Schwierigkeiten mit einem
aria-live
ausgewählt haben, könnte dies das Problem sein.
Zweitens reagieren verschiedene Screenreader unterschiedlich auf unterschiedliche
Änderungen. Beispielsweise ist es möglich, bei einigen Screenreadern
indem Sie den Stil hidden
eines untergeordneten Elements von „true“ zu „false“ ändern.
Andere Attribute, die in Verbindung mit aria-live
verwendet werden können, helfen Ihnen bei der Feinabstimmung der
die dem Nutzer mitgeteilt werden, wenn sich die Live-Region ändert.
aria-atomic
gibt an, ob die gesamte Region als
bei der Kommunikation von Updates. Wenn beispielsweise ein Datums-Widget aus einem
Tag, Monat und Jahr hat aria-live=true
und aria-atomic=true
und der Nutzer
wird ein Steuerelement verwendet, mit dem nur der Wert des Monats, der gesamte Inhalt
des Datums-Widgets wieder vorgelesen. Der Wert von aria-atomic
kann true
sein
oder false
(Standardeinstellung).
aria-relevant
gibt an, welche Arten von Änderungen dem Nutzer angezeigt werden sollen.
Einige Optionen können separat oder als Tokenliste verwendet werden.
- additions (Ergänzungen) bedeutet, dass jedes Element, das der Live-Region hinzugefügt wird,
signifikant sind. Beispiel: Anhängen eines Spans an ein vorhandenes Statusprotokoll
Nachrichten bedeuten, dass der Span dem Nutzer angekündigt wird (vorausgesetzt,
dass
aria-atomic
false
war). - text, was bedeutet, dass Textinhalte, die zu jedem untergeordneten Knoten hinzugefügt werden,
relevant sind. Wenn Sie beispielsweise das Attribut
textContent
eines benutzerdefinierten Textfeldes ändern dem Nutzer den geänderten Text vor. - Entfernen, was bedeutet, dass das Entfernen von Text oder Nachfolgeknoten Nutzenden zu vermitteln.
- all bedeutet, dass alle Änderungen relevant sind. Der Standardwert für
aria-relevant
istadditions text
. Das bedeutet, wenn Sie keinearia-relevant
wird der Nutzer bei jeder Hinzufügung zum Element aktualisiert. was Sie sich höchstwahrscheinlich wünschen.
Schließlich können Sie mit aria-busy
Hilfstechnologien darüber informieren, dass die App
Änderungen an einem Element, z. B. beim Laden, vorübergehend ignorieren. Einmal
alles vorhanden ist, sollte aria-busy
auf "false" gesetzt werden, um den
die Funktionsweise des Lesegeräts.