Mit CSS: eine notwendige Inhalte für Benutzer von Screenreadern verstecken
  |  |
Drucken  |
Senden  |
Aktie         |
Warnung: Die ursprüngliche Version dieses Dokuments ist CSS in Aktion: Invisible Inhalt Nur für Screenreader-Nutzer . Diese Französisch-Übersetzung erfolgte durch Ideose als Teil einer Vereinbarung zwischen WebAIM und Ideose .
Hinweis: Siehe Seite Dokumente auf Web-Zugänglichkeit für eine Liste aller übersetzten Dokumente. Andere Mittel zur Zugänglichkeit des Internets sind auch in der aufgeführten Portal zugänglichen digitalen .
Zusammenfassung
Einführung
Manchmal gibt es Fälle, in denen die zur Verfügung gestellten Inhalte für Benutzer von Screenreader werden, sollte aber verborgen sehende Menschen. In den meisten Fällen, wenn der Inhalt (insbesondere Inhalte, die Funktionalität oder die Interaktivität bietet) ist groß genug für die Benutzer von Screenreader, sollte es wohl gemacht für alle Benutzer verfügbar sein. Wo Informationen oder Anweisungen sind nur für Benutzer von Screenreadern sind ein Spiegelbild der schlechten Design und schlechte Zugänglichkeit zur Verfügung gestellt. Es gibt jedoch einige Fälle, in denen Informationen visuell ist offensichtlich, aber möglicherweise nicht für Nutzer von Screenreadern sein. In diesen Fällen ist es angebracht, eine Aussage über diese Information zu codieren, so dass es von einem Screenreader aber unsichtbar für sehende Benutzer gelesen werden.
Techniken, um Text zu verbergen
Es gibt mehrere Mechanismen, um den Inhalt zu verbergen. Es ist wichtig, dass die technischen Umsetzung das gewünschte Ergebnis liefert und zugänglich ist.
visibility: hidden; und / oder display:none;
Diese Stile verbergen den Text an alle Benutzer. Der Text wird aus dem visuellen Fluss von der Seite entfernt und wird von Screenreadern ignoriert. Verwenden Sie nicht diese CSS, wenn Sie den Inhalt von einem Screenreader vorgelesen werden soll. Aber verwenden Sie es, wenn Sie möchten der Inhalt nicht von Screenreadern gelesen.
width:0px;height:0px
Wie oben, da ein Element ohne Höhe oder Breite von der Strömung von der Seite entfernt wird, werden die meisten Screenreader ignorieren diese Inhalte.
HTML-Attribute width und height mit einem Null-Wert könnte daher das gleiche Ergebnis. Dies ist keine richtige Ansatz für das Verstecken Inhalte visuell, aber es können Inhalte von einem Screenreader vorgelesen werden.
text-indent: -1000px;
Dieser Ansatz bewegt sich der Inhalt von 1000 Pixel auf der linken Seite - so außerhalb des sichtbaren Bildschirms. Screenreader lesen den Text immer mit diesem Stil. Allerdings, wenn ein Link oder ein Formular-Element hat diesen Stil, kann es in einem Hinweis auf Fokus (gestrichelte Linien oder die "marschierenden Ameisen" um einen Link zu dem Fokus), die sich aus der Verlängerung wird zur Folge haben wo sollte das Element auf der Seite, wo es in der Tat tatsächlich befindet (ganz links) befinden. Es ist nicht sehr hübsch. Als solches ist es eine richtige Option, wenn das Element nicht enthalten Navigationselemente.
Positioning Inhalte außerhalb des Bildschirms in absoluten
Verwenden Sie CSS, um den versteckten Inhalt zu einer Position außerhalb des Bildschirms in der Regel Live wird als sehr nützlich und zugänglich für die Inhalte visuell zu verbergen als zu bewegen.
Positioning Inhalte außerhalb des Bildschirms
Die folgenden Stile werden für blinde und blenden Sie die Inhalte von einem Screenreader vorgelesen werden empfohlen.
{Position: absolute;
links:-10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;}
. Die CSS-Klasse Versteckt muss im Code des Elements, das wie folgt ausgeblendet werden sollen angegeben werden:
<div class="hidden">Ce texte et caché.</div> Sehende Nutzer überhaupt nicht der versteckten Inhalt zu sehen. Es ist tatsächlich außerhalb der Reichweite angezeigt - auch zur linken des sichtbaren Fensters des Browsers versteckt. Nutzer von Screenreadern haben Zugriff auf Inhalte, als ob es nicht verborgen waren. Screenreader lesen den Inhalt der Regel, ignorieren völlig die Formatvorlagen in dieser Technik verwendet wird.
Analysieren Sie den Code im Detail.
position:absolute; teilt dem Browser mit, um das Element aus dem Fluss der Seite zu löschen und beginnen, sie zu positionieren. left:-10000px; . bewegt sich der Inhalt von 10.000 Pixel nach links top:auto; teilt dem Browser mit, um vertikal zu positionieren, den Inhalt an der gleichen Position, wo es ursprünglich war.
Das Scheitern der top konnte in diesem Stil führen left wird in einigen Fällen und in einigen Browsern ignoriert.
Kurz gesagt, bewegt sich dieser Teil des Codes die 10000 Pixel auf der linken Seite.
width:1px; height:1px; overflow:hidden; weist den Browser an 1px 1px Größe von dem Element und optisch verbergen alles, was nicht in diesen Dimensionen passt.
Es gibt einige Fälle, wo die Position (links) nicht arbeiten kann, während alle anderen Stile aktiviert sind.
In diesem Fall bleibt das Element in seiner ersten Position und zu einer Größe von 1 Pixel.
Bemerkung
Eine frühere Version dieses Artikels empfohlen mit left:0px; top:-500px .
Obwohl diese Positionierung arbeitet, um den Inhalt über der Spitze zu speichern, fanden wir, dass, wenn das Element enthält einen versteckten Link oder ein Formular, wenn es den Tastatur-Fokus nimmt, den Browser zu gehen versucht auf das Element - so scrollen Sie die Seite auf.
Dies kann für sehende Benutzer über die Tastatur verwirrend sein.
Durch die Positionierung direkt auf der linken Seite, wird der Browser nicht scrollen Sie die Seite. Es sollte angemerkt werden, dass, weil Links und Elementen interaktive Features bieten, sollten sie nur selten aus sehende Menschen ausgeblendet werden.
Sehende Nutzer nicht in der Lage zu sehen, welches Element den Fokus hat, da sie außerhalb des Bildschirms.
Benchmarks und Indikatoren
Wichtig!
Generell sollte eine Anweisung auf Informationen aus sehende Benutzer und für Benutzer von Screenreadern versteckt werden nur, wenn die Informationen visuell offensichtlich, aber unerkennbar für Benutzer von Screenreadern.
Diese Technik kann verwendet werden, um Maßstäbe und Indikatoren für die Nutzer von Screenreadern Verfügung zu stellen. Es sollte mit Diskretion und nur bei Bedarf implementiert werden. Die WebAIM Seite zeigt eine gute Verwendung dieser Technik an drei Stellen.
Erstens hat das Suchfeld am oberen Rand der Seite einen Titel (label-Tag) unmittelbar vor ihm. Es ist visuell klar, dass das Feld ein Forschungsfeld ist, sondern ein Screenreader benötigt ein Label, um diese Informationen zu geben. Um dies zu tun, haben wir einen Titel über ein Label-Tag zur Verfügung gestellt, aber optisch versteckt.
Zweitens ist die Brotkrümel am oberen Rand der Seite ein gemeinsames Element in Webseiten. Die meisten Internet-Nutzer wissen, wie es funktioniert und kann es visuell zu identifizieren. Aber weil ein Screenreader greift auf diese Liste von Links in einer linearen Weise, kann es nicht offensichtlich sein, um Benutzer von Screenreader, dass dies die Brotkrümel ist, dass bis sie haben eine Rolle gespielt. Deshalb sagen sie. Um dies zu tun, ein verborgener Text "Sie befinden sich hier:" wurde kurz vor dem Paniermehl hinzu.
Schließlich identifizierten wir den Beginn der Werbung am unteren Rand jeder Seite mit versteckten Text. Wie mit den Semmelbröseln, ist es visuell auf der Hand, dass dies eine Werbung, aber nicht für einen Benutzer zum Reader-Bildschirm, da es nicht starten Lesen des Inhalts ist.
Sie können alle versteckten Text durch die Deaktivierung Stile WebAIM Seite zu sehen. Denken Sie daran, alle Inhalte visuell mit CSS versteckt wird sichtbar, wenn die Stile deaktiviert sind.
Andere Implementierungen
Für eine visuelle Benutzeroberfläche kann eine Tabelle Header-Zellen die Doppelfunktion der Organisation der Tabelle Inhalte und bieten auch Etiketten (Label) auf Elemente innerhalb dieser Tabelle bilden, wie gesehen im Screenshot unten von einer Form in einer Datentabelle.
Die Header-Zeile und Spalte der Tabelle sind nur von geringem Wert in Bezug auf das Verständnis der Layout der Tabelle, aber die Überschriften sind nicht Formularfelder. Wenn Benutzer von Screenreadern, um ein Formularfeld zu einem anderen Feld tabellarisieren, werden sie nicht hören, dass die Kopfzeilen der Tabelle. In der Tat, sie nicht hören jedem Etikett. Screen-Reader benötigen Etiketten für Text-Formularfelder. Aber fügen Sie Text-Etiketten auf jedes Formularfeld wäre sicherlich überflüssig, unnötig und würde wahrscheinlich für sehende Benutzer verwirren. In diesem Fall können die Etiketten in dem Code benachbart zu ihren entsprechenden Formularfelder bereitgestellt werden, nicht sichtbar mit der CSS-oberhalb und wie folgt realisiert ...
<label for= »amembers "class= »hidden »> Anzahl der Mitglieder im Team A </ label>
...
Ein weiteres Beispiel für scheinbare Unvereinbarkeit zwischen den Bedürfnissen der Benutzer von Screenreadern und sehende Benutzer tritt auf, wenn viele Entwickler Formularfelder, die auf dem selben Label erscheinen, gehören zu erstellen. Ein typisches Beispiel dafür ist, wenn zwei oder mehr Text Eingabefelder für Telefonnummern verwendet werden.
Die meisten sehende Benutzer in Nordamerika gehören die Texteingabe Bereichen, um verschiedene Teile einer Rufnummer entsprechen. Nutzer von Screenreadern können jedoch wollen die gesamte Telefonnummer in das erste Feld eingeben. Sie werden sicherlich ein wenig überrascht, als sie, dass das Feld, um nur drei Stellen begrenzt ist oder dass es andere Felder, die nicht lauten, welche folgen es zu entdecken.
Die naheliegendste Lösung für dieses Problem wäre es, alle Textfelder in einem zu kombinieren, und geben Sie dann das entsprechende Etikett. Jedoch kann die CSS-Technik auch auf diese Situation angewendet werden, um Etiketten bei jeder einzelnen Textfeld verborgen hinzuzufügen.
<p> Telefonnummer:
(
<label for= »area "class= »hidden »> Vorwahl </ label>
<input name= »area "id= »area" type= »text "size= »3" maxlength= »3"/>
)
...
Abschluss
Wenn die hier vorgestellten Verfahren werden verwendet, um CSS-Inhalte verbergen, werden sehende Benutzer nie erfahren, dass der Inhalt vorhanden ist (es sei denn, sie deaktivieren Stile). Nutzer von Screenreadern, auf der anderen Seite, wird nie begreifen, dass diese Inhalte unsichtbar für sehende Benutzer ist. Beide Arten von Benutzern in der Lage, den Inhalt intuitiv bedienen können ohne Code-Änderung notwendig ist. Dies kann wichtige Kontextinformationen, sonst unmöglich, für Screenreader-Nutzer wegen ihrer visuellen Natur einzufangen. Wenn verwendet klug, kann diese Technik einige Probleme lösen zwischen den Anforderungen der Barrierefreiheit und den Anforderungen der visuellen Gestaltung von Web-Seiten. Dies ist nicht die einzige technische oder einzige Weg, um dieses Problem zu lösen, aber es ist eine der Lösungen, Web-Entwickler nutzen können, wenn nötig.
Kommerzielle Links
WebAIM ist eine Initiative von:
Urheberrecht 1999-2009 WebAIM
