Inhalte visuell und trotzdem zugänglich verstecken

[Matthias Apsel]

Hallo alle,

bei meinen Recherchen zu zugänglichen Formularen habe ich mir JAWS installiert und musste feststellen, dass neben

display: none;

und

visibility: hidden;

auch

rect: (1px, 1px, 1px, 1px);

und

font: 0/0 serif;

nicht vorgelesen wird.

Auch ein „Einsperren“ in

@media screen {
}

oder

@media only screen {
}
/* Das war eigentlich klar */

brachte nicht den gewünschten Erfolg.

Lediglich das Verschieben aus dem Viewport

left: -99999px;

sowie

aria-label

funktionierte.

Also: Wie macht mans richtig?

Bis demnächst
Matthias

[MrMurphy1]

Hallo

Also: Wie macht mans richtig?

Es gibt leider keine kostenlosen oder zumindest kostengünstigen Möglichkeiten den eigenen Quellcode auch praktisch auf Zugänglichkeit / Barrierefreiheit zu prüfen.

Für den Firefox gab es mal ein AddOn, das anzeigen sollte, wie Screenreader eine Seite vorlesen. Später war dann zu lesen, dass das AddOn wohl doch Unterschiede zu realen Screenreadern machte und damit eher sinnlos war.

Zur Zeit bleibt wohl nur sich auf Dritte zu verlassen und deren Lösungen zu übernehmen.

Bis ich was anderes höre benutze ich aktuell die Lösung vom HTML5 Boilerplate

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

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

das sich wie im Kommentar ersichtlich auf

http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

bezieht und auf Github zusätzlich auf

http://webaim.org/techniques/css/invisiblecontent/

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

Bis ich was anderes höre benutze ich aktuell die Lösung vom HTML5 Boilerplate

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

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

Ja, das kenne ich auch und habe es mit JAWS getestet, wie im OP geschrieben. Ergebnis: Ein so verstecktes Label wird nicht vorgelesen.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Matthias,

.visuallyhidden {
    clip: rect(0 0 0 0);
}

vielleicht deshalb eher das, was auch in beiden verlinkten Artikeln verwendet wird:

.visuallyhidden {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Liebe Grüße,

Felix Riesterer.

[Matthias Apsel]

Hallo Felix Riesterer,

vielleicht deshalb eher das, was auch in beiden verlinkten Artikeln verwendet wird:

.visuallyhidden {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

Genau das habe ich getestet, nicht mit rect(0,0,0,0);

Bis demnächst
Matthias

[Martl]

Hallo zusammen,

Lediglich das Verschieben aus dem Viewport...

mal eine Verständnisfrage: Was spricht eigentlich gegen diese Technik oder was ist daran unrichtig? Ich verwende sie seit Jahren und hatte noch nie Probleme.

Grüße, Martl

[MrMurphy1]

Hallo

Ich verwende sie seit Jahren und hatte noch nie Probleme.

Schön für dich - entscheidend sind aber eher die Besucher der Webseiten.

Hast du denn auch mal deine Seiten mit der Tastatur bedient?

Siehe zum Beispiel

http://www.gabriele-strache.de/notizen/uebersetzung/css_unsichtbarer_inhalt.html

Gruss

MrMurphy

[Martl]

Hallo MrMurphy,

das ist allerdings ein Argument!

Grüße, Martl

["Again what learned!" (Loddar M.)]

[Rambo Iglesias]

Hallo zusammen,

Lediglich das Verschieben aus dem Viewport...

mal eine Verständnisfrage: Was spricht eigentlich gegen diese Technik oder was ist daran unrichtig?

Sie erzeugt eine (unsichtbare) Box mit 10.0000px Breite, was CPU-Power kosten soll - heute wohl eher vernachlässigbar.

Herzliche Grüße Rambo

[Gunnar Bittersmann]

@@Rambo Iglesias

Sie erzeugt eine (unsichtbare) Box mit 10.0000px Breite, was CPU-Power kosten soll - heute wohl eher vernachlässigbar.

Im Gegenteil. Die durchschnittlichliche Leistungsfähigkeit (CPU, Speicher) der Geräte, mit denen die Leute im Web unterwegs sind, ist heute deutlich geringer als vor einigen Jahren.

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Sie erzeugt eine (unsichtbare) Box mit 10.0000px Breite, was CPU-Power kosten soll - heute wohl eher vernachlässigbar.

Im Gegenteil. Die durchschnittlichliche Leistungsfähigkeit (CPU, Speicher) der Geräte, mit denen die Leute im Web unterwegs sind, ist heute deutlich geringer als vor einigen Jahren.

Vorsicht, diese Aussage ist schwer zu halten. Wenn ich zum Beispiel an die Core2Duo-Kisten mit 1GB RAM zurück denke, da sind die Smartphones heute deutlich schneller in allem: CPU, Speicher, Storage und GPU.

LG,
CK

[Matthias Apsel]

Hallo Matthias Apsel,

Jan Hellbusch verweist bei Twitter auf Steve Faulkners Artikel HTML5 Accessibility Chops: hidden and aria-hidden.

Bis demnächst
Matthias