So verbergen Sie Elemente im Web und ihre Vor- und Nachteile

Beispiel-Quellcode:

https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

5. Auswirkungen der Zugänglichkeit auf die Sichtbarkeit: versteckt

Das Element wird ausgeblendet, seine untergeordneten Elemente werden aus dem Barrierefreiheitsbaum entfernt und Bildschirmleseprogramme geben das Element nicht wieder.

(1) Positionierung

Um ein Element mit dem Positionsattribut auszublenden, sollten wir es aus dem Bildschirm verschieben und seine Größe auf 0 (Breite und Höhe) setzen. Ein Beispiel hierfür ist ein Sprungnavigationslink. Betrachten Sie das folgende Diagramm:

Um den Link außerhalb des Bildschirms zu platzieren, sollten wir Folgendes hinzufügen

„css“

.Link überspringen { 
    Position: absolut; 
    oben: -100%; 
}

Bei einem Wert von -100 % wird das Element auf 100 % der Ansichtsfensterhöhe verschoben. Dadurch wird es vollständig ausgeblendet. Sobald der Fokus auf der Tastatur liegt, wird es folgendermaßen angezeigt

.skip-link:fokus { 
    Position: absolut; 
    oben: 0; 
}

Beispiel-Quellcode:

https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

6. Einfluss der Erreichbarkeit auf die Position: absolut | fest

Das Element ist für Bildschirmleseprogramme zugänglich und über die Tastatur fokussierbar. Es ist lediglich im Ansichtsfenster ausgeblendet.

Clip-Pfad: Wenn der Clip-Pfad auf einem Element verwendet wird, wird ein Clipping-Bereich erstellt, der definiert, welche Teile angezeigt und ausgeblendet werden sollen.

Im obigen Beispiel enthält der transparente schwarze Bereich den Clip-Pfad. Wenn ein Clip-Pfad auf ein Element angewendet wird, wird alles unter dem transparenten schwarzen Bereich nicht angezeigt.

Um das oben genannte intuitiver zu demonstrieren, verwende ich das Clippy-Tool. Im GIF unten habe ich den folgenden Clip-Pfad:

Wenn Sie den Polygonwert in jede Richtung auf 0 0 setzen, wird die Größe des Clipping-Bereichs auf Null geändert. Dies hat zur Folge, dass das Bild nicht angezeigt wird. Dies kann analog auch mit einem Kreis statt einem Polygon erfolgen:

img { 
    Clip-Pfad: Kreis (0 bei 50 % 50 %); 
} 

7. Auswirkungen der Zugänglichkeit auf den Clip-Pfad

Das Element wird nur optisch ausgeblendet; es ist weiterhin für Bildschirmleseprogramme und den Tastaturfokus zugänglich.

Beispiel-Quellcode:

https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

3. Kontrollieren Sie Farbe und Schriftgröße

Diese beiden Techniken sind zwar nicht so gebräuchlich wie die zuvor besprochenen, für bestimmte Anwendungsfälle können sie jedoch nützlich sein.

1. Transparente Farbe

Indem die Farbe des Textes transparent gemacht wird, wird er optisch ausgeblendet. Dies ist für Schaltflächen nützlich, 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 wir eine Schaltfläche mit der folgenden Struktur haben:

<Schaltfläche> 
  <svg Breite="24" Höhe="24" Ansichtsbox="0 0 24 24" aria-hidden="false" fokussierbar="false"> 
    <!-- Pfaddaten --> 
  </svg> 
  <span>Gefällt mir</span> 
</button>

Unser Ziel ist es, Text auf zugängliche Weise zu verbergen. Dazu habe ich folgendes CSS hinzugefügt

.button span { 
    Farbe: transparent; 
    Schriftgröße: 0; 
}

Auf diese Weise wird der Text ausgeblendet. Es funktioniert sogar ohne Farbänderung, ich habe es aber zur Erklärung hinzugefügt.

Beispiel-Quellcode:

https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

3. Arie versteckt

Wenn Sie einem Element das Attribut „aria-hidden“ hinzufügen, wird das Element aus dem Barrierefreiheitsbaum entfernt, was das Erlebnis für Benutzer von Bildschirmleseprogrammen verbessern kann. Beachten Sie, dass das Element dadurch nicht optisch ausgeblendet wird, sondern sich nur an Benutzer von Bildschirmleseprogrammen richtet.

<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.

Laut Mozilla Developer Network (MDN) gibt es folgende Anwendungsfälle für das Attribut:

• Blenden Sie dekorative Inhalte wie Symbole und Bilder aus.
• Kopierten Text ausblenden.
• Blenden Sie Off-Screen- oder ausgeblendete Inhalte aus.

4. Auswirkungen der Zugänglichkeit auf aria-hidden="true"

ist für Bildschirmleseprogramme konzipiert, da es den Inhalt nur vor Bildschirmleseprogrammen 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 eine versteckte mobile Navigation anzuzeigen, muss dies auf zugängliche Weise erfolgen. Wir werden einige gute Beispiele untersuchen, von denen wir im Hinblick auf eine barrierefreie Nutzung lernen können, sowie einige schlechte Beispiele, um Fehler zu vermeiden, die zu einer schlechten Erfahrung für Benutzer von Bildschirmleseprogrammen führen könnten.

Menüanimation – Schlechtes Beispiel

Wir haben ein Menü, das beim Erweitern eine Gleitanimation aufweisen muss. Der einfachste Weg, dies zu tun, besteht darin, Ihrem Menü Folgendes hinzuzufügen:

ul { 
    Deckkraft: 0; 
    transformieren: übersetzenX(100%); 
    Übergang: 0,3 s Auslaufzeit; 
} 
 
ul.aktiv { 
    Deckkraft: 1; 
    transformieren: übersetzenX(0); 
}

Wenn das Obige vorhanden ist, wird das Menü basierend auf der Klasse .active erweitert und reduziert, die wie folgt über JavaScript hinzugefügt wird:

menuToggle.addEventListener('klicken', Funktion(e){ 
  e.preventDefault(); 
  navMenu.classList.toggle('aktiv'); 
}); 

Das Ergebnis sieht zwar gut aus, enthält aber einen großen Fehler. Durch die Verwendung von Opazität: 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 werden, um eine Verwirrung des Benutzers zu vermeiden.

Hier ist ein Screenshot des Zugänglichkeitsbaums von Chrome Dev Tools:

Kurz gesagt ist der Barrierefreiheitsbaum eine Liste aller Inhalte, auf die Benutzer von Bildschirmleseprogrammen zugreifen können. In unserem Fall ist die Navigationsliste vorhanden, aber optisch ausgeblendet. Wir müssen zwei Probleme lösen:

• Vermeiden Sie den Tastaturfokus, wenn das Menü ausgeblendet ist.
• Vermeiden Sie Bildschirmlesebenachrichtigungen über die Navigation, wenn diese ausgeblendet ist

Der Screenshot unten zeigt, wie die Seite mit dem VoiceOver-Rotor unter Mac OS angezeigt wird. Die Navigationsliste ist vorhanden, aber ausgeblendet

Beispiel-Quellcode:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

Menüanimation – gutes Beispiel

Um diesen Fehler zu beheben, müssen wir für das Navigationsmenü „Sichtbarkeit: versteckt“ verwenden. Dadurch wird sichergestellt, dass das Menü optisch und vor Bildschirmleseprogrammen verborgen ist.

„css“

ul { 
    Sichtbarkeit: versteckt; 
    Deckkraft: 0; 
    transformieren: übersetzenX(100%); 
    Übergang: 0,3 s Auslaufzeit; 
} 
 
ul.aktiv { 
    Sichtbarkeit: sichtbar; 
    Deckkraft: 1; 
    transformieren: übersetzenX(0); 
}

Nach dem Hinzufügen wird das Menü vor Bildschirmleseprogrammen ausgeblendet. Lassen Sie uns es noch einmal testen und sehen, was VoiceOver anzeigt:

Beispiel-Quellcode:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

5. Benutzerdefiniertes Kontrollkästchen

Das Standarddesign des Kontrollkästchens 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 Klasse="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 allgemeine CSS-Klasse namens sr-only oder visually-hidden, die ein Element nur visuell verbirgt und es für Benutzer von Tastatur und Bildschirmleseprogrammen zugänglich macht.

.sr-nur { 
  Rand: 0; 
  Clip:Rechteck(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; 
  Leerzeichen: Nowrap; 
}

Beispiel-Quellcode: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

Schaltfläche „Ausblenden“

Auf Twitter gibt es eine Schaltfläche namens „Neue Tweets anzeigen“, die vor Screenreadern mit Aria-Hidden-Inhalten verborgen ist und nur angezeigt wird, wenn neue Tweets verfügbar sind.

Zusammenfassen

Damit ist dieser Artikel über Methoden zum Ausblenden von Elementen im Web und ein ausführliches Tutorial zu deren Vor- und Nachteilen abgeschlossen. Weitere Inhalte zum Ausblenden von Elementen im Web finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!