Inhalte ausblenden und aktualisieren

Verbergen von Inhalten vor assistiven Technologien

Alice Boxhall
Alice Boxhall
X
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

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.

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 der aria-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 deaktivieren aria-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 ist additions text. Das bedeutet, wenn Sie keine aria-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.