Fallquellcode:
https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100
5. Der Einfluss der Barrierefreiheit auf die Sichtbarkeit: verborgen
Das Element ist ausgeblendet, seine Nachkommen werden aus der Barrierefreiheitsstruktur entfernt und Bildschirmleseprogramme rendern das Element nicht.
(1) Positionierung
Um ein Element mit dem Positionsattribut auszublenden, sollten wir es vom Bildschirm entfernen und seine Größe auf 0 (Breite und Höhe) setzen. Ein Beispiel sind Sprungnavigationslinks. Betrachten Sie das folgende Diagramm:
Um den Link außerhalb des Bildschirms zu platzieren, sollten wir Folgendes hinzufügen
「css」
.skip-link {
Position: absolut;
oben: -100 %;
}Ein Wert von -100 % verschiebt das Element auf 100 % seiner Ansichtsfensterhöhe. Dadurch wird es vollständig ausgeblendet. Sobald es auf die Tastatur fokussiert ist, wird es so angezeigt
.skip-link:focus {
Position: absolut;
oben: 0;
}Fallquellcode:
https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100
6. Der Einfluss der Zugänglichkeit auf die Position: absolut behoben
Das Element ist für Screenreader zugänglich und über die Tastatur fokussierbar. Es ist nur im Ansichtsfenster verborgen.
Beschneidungspfad Wenn der Beschneidungspfad für ein Element verwendet wird, wird ein Beschneidungsbereich erstellt, der definiert, welche Teile angezeigt und ausgeblendet werden sollen.
Im obigen Beispiel verfügt der transparente schwarze Bereich über einen Clip-Pfad. Wenn Clip-Pfad auf ein Element angewendet wird, wird alles unter dem transparenten schwarzen Bereich nicht angezeigt.
Um das oben Gesagte visueller zu veranschaulichen, verwende ich das Clippy-Tool. Im GIF unten habe ich den folgenden Clip-Pfad:
Setzen Sie den Polygonwert in jeder Richtung auf 0 0 und die Größe des Zuschneidebereichs wird auf 0 geändert. Daher wird das Bild nicht angezeigt. Ebenso kann dies auch dadurch erreicht werden, dass das Polygon durch einen Kreis ersetzt wird:
img {
Clip-Pfad: Kreis (0 bei 50 % 50 %);
} 
7. Der Einfluss der Barrierefreiheit auf den Clip-Pfad
Das Element ist nur optisch ausgeblendet, Screenreader und Tastaturfokus können es weiterhin verwenden.
Fallquellcode:
https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100
3. Steuern Sie Farbe und Schriftgröße
Obwohl diese beiden Techniken nicht so verbreitet sind wie die zuvor besprochenen, können sie für bestimmte Anwendungsfälle nützlich sein.
1. Transparente Farbe
Indem Sie die Farbe des Textes transparent machen, wird er optisch ausgeblendet. Dies ist nützlich für Schaltflächen, die nur Symbole haben.
2. Schriftgröße
Darüber hinaus ist es sinnvoll, die Schriftgröße auf 0 zu setzen, da dadurch der Text optisch ausgeblendet wird. Betrachten Sie das folgende Beispiel, in dem es eine Schaltfläche mit der folgenden Struktur gibt:
<Schaltfläche> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- Pfaddaten --> </svg> <span>Gefällt mir</span> </button>
Unser Ziel ist es, den Text auf zugängliche Weise zu verbergen. Dazu habe ich das folgende CSS hinzugefügt
.button span {
Farbe: transparent;
Schriftgröße: 0;
}Auf diese Weise wird der Text ausgeblendet. Es funktioniert sogar, ohne die Farbe zu ändern, aber ich habe es zur Erklärung hinzugefügt.
Fallquellcode:
https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100
3. Arie versteckt
Wenn Sie das Attribut aria-hidden zu einem Element hinzufügen, wird das Element aus der Barrierefreiheitsstruktur entfernt, was das Erlebnis für Benutzer von Bildschirmleseprogrammen verbessern kann. Beachten Sie, dass das Element dadurch nicht optisch ausgeblendet wird, sondern nur für Benutzer von Bildschirmleseprogrammen gedacht ist
<Schaltfläche> Speisekarte <svg aria-hidden="true"><!-- --></svg> </button>
Im obigen Beispiel haben wir eine Menüschaltfläche mit einer Beschriftung und einem Symbol. Um Symbole vor Bildschirmleseprogrammen auszublenden, wurde aria-hidden hinzugefügt.
Nach Angaben des Mozilla Developer Network (MDN) sind unten die Anwendungsfälle für Eigenschaften aufgeführt
Blenden Sie dekorative Inhalte wie Symbole und Bilder aus. Kopierten Text ausblenden. Blenden Sie Inhalte außerhalb des Bildschirms oder minimiert aus.
4. Einfluss der Barrierefreiheit auf aria-hidden="true"
ist für Bildschirmlesegeräte konzipiert, da es Inhalte nur vor Bildschirmlesegeräten verbirgt. Der Inhalt bleibt jedoch für sehende Benutzer sichtbar und die Tastatur ist fokussierbar.
(1) Animation und Interaktion
Wenn wir ein verstecktes Element animieren möchten, um beispielsweise die versteckte mobile Navigation anzuzeigen, muss dies auf zugängliche Weise erfolgen. Für ein barrierefreies Erlebnis untersuchen wir einige gute Beispiele, aus denen Sie lernen können, und einige schlechte Beispiele, um Fehler zu vermeiden, die für Benutzer von Bildschirmleseprogrammen zu einem schlechten Erlebnis führen können.
Menüanimation – schlechtes Beispiel
Wir haben ein Menü, das beim Erweitern eine verschiebbare Animation haben muss. Am einfachsten ist es, Folgendes zu Ihrem Menü hinzuzufügen:
ul {
Deckkraft: 0;
transform: TranslateX(100%);
Übergang: 0,3 s Ease-out;
}
ul.aktiv {
Deckkraft: 1;
transform: TranslateX(0);
}Mit dem oben Gesagten wird das Menü basierend auf der .active-Klasse erweitert und reduziert, die wie folgt über JavaScript hinzugefügt wird:
menuToggle.addEventListener('click', function(e){
e.preventDefault();
navMenu.classList.toggle('active');
});
Das Ergebnis sieht vielleicht gut aus, hat aber einen großen Fehler. Durch die Verwendung von opacity: 0 wird die Navigation im Barrierefreiheitsbaum nicht ausgeblendet. Auch wenn die Navigation optisch ausgeblendet ist, ist sie dennoch über die Tastatur fokussierbar und für Screenreader zugänglich. Es muss ausgeblendet sein, um Benutzer nicht zu verwirren.
Hier ist ein Screenshot des Barrierefreiheitsbaums von Chrome Dev Tools:
Einfach ausgedrückt ist ein Barrierefreiheitsbaum eine Liste aller Inhalte, auf die Benutzer von Bildschirmleseprogrammen zugreifen können. In unserem Fall ist die Navigationsliste vorhanden, während sie optisch verborgen ist. Wir müssen zwei Probleme lösen:
Vermeiden Sie die Verwendung des Tastaturfokus, wenn das Menü ausgeblendet ist. Vermeiden Sie die Navigation per Sprachausgabe, wenn die Navigation ausgeblendet ist
Der Screenshot unten zeigt, wie der VoiceOver-Rotor unter Mac OS die Seite sieht. Die Navigationsliste ist vorhanden, während sie ausgeblendet ist
Fallquellcode:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100
Menüanimation – gutes Beispiel
Um diesen Fehler zu beheben, müssen wir „visibility:hidden“ für das Navigationsmenü verwenden. Dadurch wird sichergestellt, dass das Menü vor visuellen Lesegeräten und Bildschirmlesegeräten verborgen bleibt.
「css」
ul {
Sichtbarkeit: verborgen;
Deckkraft: 0;
transform: TranslateX(100%);
Übergang: 0,3 s Ease-out;
}
ul.aktiv {
Sichtbarkeit: sichtbar;
Deckkraft: 1;
transform: TranslateX(0);
}Nach dem Hinzufügen wird das Menü für Bildschirmleseprogramme ausgeblendet. Testen wir es noch einmal und sehen, was VoiceOver anzeigt:
Fallquellcode:
https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110
5. Benutzerdefiniertes Kontrollkästchen
Das standardmäßige Kontrollkästchendesign lässt sich nur schwer anpassen. Daher müssen wir ein benutzerdefiniertes Design für das Kontrollkästchen erstellen. Schauen wir uns das grundlegende HTML an:
<p class="c-checkbox"> <input class="sr-only" type="checkbox" name="" id="c1"> <label class="c-checkbox__label" for="c1">Benutzerdefiniertes Kontrollkästchen</label> </p>
Um das Kontrollkästchen anzupassen, müssen wir die Eingabe auf zugängliche Weise ausblenden. Zu diesem Zweck sollten Position und andere Eigenschaften verwendet werden. Es gibt eine gängige CSS-Klasse namens sr-only oder visual-hidden, die ein Element nur visuell verbirgt und es für Tastatur- und Screenreader-Benutzer zugänglich macht.
.sr-only {
Rand: 0;
Clip: rect(0 0 0 0);
-webkit-clip-path: Polygon(0px 0px, 0px 0px, 0px 0px);
Clip-Pfad: Polygon(0px 0px, 0px 0px, 0px 0px);
Höhe: 1px;
Rand: -1px;
Überlauf: versteckt;
Polsterung: 0;
Position: absolut;
Breite: 1px;
Leerraum: nowrap;
}Fallquellcode: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100
Schaltfläche „Ausblenden“.
Auf Twitter gibt es eine Schaltfläche namens „Neue Tweets anzeigen“, die für Screenreader mit ausgeblendeten Inhalten ausgeblendet ist und nur angezeigt wird, wenn neue Tweets veröffentlicht werden.
Zusammenfassen
Damit ist dieser Artikel über das ausführliche Tutorial zu den Methoden sowie den Vor- und Nachteilen des Ausblendens von Elementen im Web abgeschlossen. Weitere Informationen zum Ausblenden von Elementen im Web finden Sie in den vorherigen Artikeln auf downcodes.com oder weiter unten in den entsprechenden Artikeln Ich hoffe, dass Sie downcodes.com in Zukunft noch mehr unterstützen werden!