Meisterung der Zugänglichkeit außerhalb des sichtbaren Bereichs | CSS Techniken

Einführung

In diesem Lab werden wir das Konzept des Ausblenden von Elementen außerhalb des sichtbaren Bereichs in CSS erkunden. Diese Technik ermöglicht es uns, Elemente visuell und positionell nicht zugänglich zu machen, während sie für assistive Technologien weiterhin zugänglich bleiben. Am Ende dieses Labs werden Sie eine solide Vorstellung davon haben, wie diese Technik verwendet werden kann, um zugänglichere und layoutfreundlichere Webseiten zu erstellen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") subgraph Lab Skills css/selectors -.-> lab-35227{{"Zugängliches Ausblenden von Elementen außerhalb des sichtbaren Bereichs"}} css/margin_and_padding -.-> lab-35227{{"Zugängliches Ausblenden von Elementen außerhalb des sichtbaren Bereichs"}} css/borders -.-> lab-35227{{"Zugängliches Ausblenden von Elementen außerhalb des sichtbaren Bereichs"}} css/width_and_height -.-> lab-35227{{"Zugängliches Ausblenden von Elementen außerhalb des sichtbaren Bereichs"}} css/positioning -.-> lab-35227{{"Zugängliches Ausblenden von Elementen außerhalb des sichtbaren Bereichs"}} end

Außerhalb des sichtbaren Bereichs

index.html und style.css wurden bereits in der VM bereitgestellt.

Diese Technik verbirgt ein Element im DOM vollständig, während es weiterhin zugänglich bleibt. Um dies zu erreichen, können Sie die folgenden Schritte ausführen:

Entfernen Sie alle Kanten und Innenabstände und verstecken Sie das Überlaufen des Elements.
Verwenden Sie clip, um sicherzustellen, dass kein Teil des Elements sichtbar ist.
Legen Sie die Höhe und Breite des Elements auf 1px fest und negieren Sie sie mit margin: -1px.
Verwenden Sie position: absolute, um zu verhindern, dass das Element im DOM Platz einnimmt.
Beachten Sie, dass diese Technik im Hinblick auf Zugänglichkeit und Layout-Freundlichkeit eine bessere Alternative zu display: none (nicht lesbar für Bildschirmleser) und visibility: hidden (nimmt physischen Platz im DOM ein) ist.

Hier ist ein Beispiel dafür, wie Sie diese Technik in HTML und CSS verwenden können:

<a class="button" href="https://google.com">
  Learn More <span class="offscreen">about pants</span>
</a>

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Außerhalb des sichtbaren Bereichs" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.