Text zwischen <span> und </span> für braille und aural ausgeben

[Marc]

Hallo Forum,

zwar weiß ich, wie man unterschiedliche css-Dateien für unterschiedliche Ausgabemedien erstellt und einbindet, aber das wäre in meinem Fall zu aufwändig. Meine Seite ist bereits weitgehend barrierefrei. Nun will ich für Blinde lediglich einige zusätzliche Hinweise einbauen, die nur von screenreadern vorgelesen werden, bzw. von der Braille-zeile angezeigt werden.

Für derartige Hinweise habe ich eine Klasse .sr_hint definiert. Wie bekomme ich es nun hin, dass Text zwischen <span class="sr_hint"> und </span> nur von screenreadern und Braille-Zeilen ausgegeben werden, auf einem normalen Screen aber nicht sichtbar sind?

Gruß,
Marc.

[Samuel Vogel]

Hallo,

Formatier den Text doch einfach so:
Farbe: gleich wie der Hintergrund des Textes
Größe: 0px/1px

samy,

[Marc]

Hallo samy

Formatier den Text doch einfach so:
Farbe: gleich wie der Hintergrund des Textes
Größe: 0px/1px

Solche "Hacks" wollte ich eigentlich vermeiden... wenn niemand etwas besseres weiß, werde ich doch lieber zwei css-Dateien anlegen. Aber da ich keine Tabellen verwende, ist die css-Datei schon sehr große und der einzige Unterschied zwischen den beiden bestünde dann in display:none an der entsprechenden Stelle - oder aber ohne diese Angabe. - Müsste dann aber von diesem Moment an zwei CSS-Dateien parallel pflegen...

Das will ich mir auch nicht antun, weil man sich da zu leicht VERtut....

Gruß,
Marc.

[Thomas Luethi]

Hallo,

[...] der einzige Unterschied zwischen den beiden bestünde dann in display:none an der entsprechenden Stelle - oder aber ohne diese Angabe. - Müsste dann aber von diesem Moment an zwei CSS-Dateien parallel pflegen...

Du kannst auch alles in einer einzigen Stylesheet-Datei haben.

Es gibt die @media ... { ... } Syntax.

@media screen,projection,print
  {
   .sr_hint {display:none; }
  }

oder so... Siehe:
http://selfhtml.teamone.de/css/formate/einbinden.htm#media

Gruesse,

Thomas

P.S. Hinweis: Klassennamen mit Underscores sind fuer
Netscape 4.x offenbar gefaehrlich, insbesondere
im Zusammenhang mit JavaScript.

[molily]

Wie bekomme ich es nun hin, dass Text zwischen <span class="sr_hint"> und </span> nur von screenreadern und Braille-Zeilen ausgegeben werden, auf einem normalen Screen aber nicht sichtbar sind?

So wie du dir das denkst, geht es nicht bzw. das geht zwar rein technisch, wird aber in der Praxis nicht das von dir gewünschte Ergebnis haben. Die gängigen Screenreader mit Sprachsynthese und Braille-Ausgabe ignorieren Styles für aural/braille bzw. sie lesen das vor, was auf dem Bildschirm erscheint, also was für screen existent ist. display:none für screen heißt dann eben, dass das Element auch bei der Sprachausgabe/Brailleausgabe nicht existiert. Um einen Workaround wirst du also nicht umherkommen. Siehe dazu z.B. http://css-discuss.incutio.com/?page=ScreenreaderVisibility. Ob das Verstecken durch gleiche Vordergrundfarbe wie Hintergrundfarbe funktioniert, weiß ich aus dem Kopf nicht, das müsstest du testen. Die wichtigsten Screenreader gibt es als Testversionen, siehe Link am Ende der Seite.