Damit Benutzern von Screen Readern der Inhalt von Webseiten verständlich vorgelesen wird, kann / soll man fremdsprachige Wörter / Passagen mit dem lang-Attribut auszeichnen. Darüber habe ich mehrfach gebloggt. Zuletzt hier: Sprachwechsel oder nicht - die Dritte

Ein Sonderfall sind “denglische” Ausdrücke, also Wörter, die einem deutschsprachigen Leser wie englisch erscheinen, aber nicht wirklich englisch sind. Beispiel: “Webdesign” gibt es im Englischen nicht. Korrektes Englisch ist vielmehr “web design".

Hier 4 Varianten:

• webdesign ohne Auszeichnung
• webdesign mit Auszeichnung
• web design ohne Auszeichnung
• web design mit Auszeichnung

Wie der verbreitete Screen Reader Jaws (Version 11.0) mit dieser Situation umgeht, zeigt folgendes Hörbeispiel.

Download des Hörbeispiels (mp3 - 82 kB)

Der kostenlose Screen Reader NVDA wiederum zeigt sich von jeglicher Sprachauszeichnung unbeeindruckt. Die von mir verwendete Spache “Steffi” hat aber dafür ein integriertes Aussprachewörterbuch, um den gebräuchlichen Ausdruck “Webdesign” korrekt auszusprechen:

Download des Hörbeispiels (mp3 - 77 kB)

Es gibt übrigens noch viele solcher Beispiele. Um nur eins zu nennen: Screen Reader ist englisch. Nicht aber Screenreader, oder (von) Screen Readern.

Der geneigte Web Worker (nicht: Webworker!) möge sein eigenes Urteil fällen.

­ zur Erzeugung einer Worttrennung nur bei Bedarf dürfte allgemein bekannt sein. Getrennte Wörter werden korrekt mit einem Bindestrich vor dem Zeilenumbruch angezeigt.
Was aber, wenn dieser Bindestrich nicht gewünscht ist, zum Beispiel bei einem Codeschnipsel?
<wbr> oder <wbr /> verbietet sich, weil es Seiten invalid macht.
Aber seit ich auf die Unterstüzung des IE6 verzichte, gibt es eine valide Alternative: &#8203;

Hier ein Beispiel:
TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​TestText​

Danke an www.quirksmode.org

Nachtrag: Der Opera in der aktuellen Version 10.60 zeigt leider an Stelle von &#8203; einen Platzhalter an. Also wieder nichts. <wbr> oder <wbr /> versteht der Opera, aber …
:-(

Sprachwechsel innerhalb eines HTML-Dokuments sollen/müssen entsprechend ausgezeichnet werden. Unter anderem, damit die jeweiligen Passagen von Screen Readern richtig vorgelesen werden.
Zu diesem Thema habe ich mich hier im Blog bereits mehrmals geäussert:
/blog/2009/09/26/sprachwechsel-fur-screen-reader-auszeichnen/
und
/blog/2010/04/10/sprachauszeichnung-oder-nicht-sprachauszeichnung/
Mein Fazit: Zurückhaltung beim Auszeichnen von Sprachwechseln ist angesagt. Auch der Blind-Text Blog vertritt im Wesentlichen meine Haltung.

Eine zufällige Erfahrung bestärkt mich in meiner Haltung: Ich hatte den Screen Reader NVDA mit der deutschen Stimme von Steffi aktiviert, und besuchte die englischsprachige Seite angularjs.org. Das hört sich dann folgendermaßen an:

Download des Hörbeispiels (mp3 - 306 kB)

Erstaunlicherweise ist der Text relativ gut verständlich, obwohl, wie gesagt, der Screen Reader auf Deutsch eingestellt war. Zu verdanken ist dies dem Hersteller des Screen Readers bzw. dem Hersteller der synthetischen Sprache, der viele gebräuchliche englische Begriffe in ein entsprechendes Wörterbuch aufgenommen hat.

Was will ich damit zeigen? Nein, ich plädiere nicht für falsche/fehlende Sprachauszeichnung für das ganze Dokument. Ich will nur zeigen, dass auch längere Passagen in Englisch ohne eine “richtige” Sprachauszeichnung relativ gut verständlich sind. Möglicherweise, abhängig vom verwendeten System aus Screen Reader und Sprachdatei, sogar besser als mit ausgezeichnetem Sprachwechsel.

Der Firefox macht um den Absende-Button von Formularen einen gepunkteten Rahmen, wenn man den Button per Tabulator-Taste ansteuert.
Das kann im Falle eines sorgfältig gestaltetes Designs arg stören. Ein Beispiel ist der per CSS “rund gemachte” Absende-Button meines Suchformulars. (siehe diesen Beitrag.)

Ein eckiger Rahmen um einen runden Button, das sieht wirklich nicht gut aus.
Aber dieser Rahmen widersetzt sich sich allen Versuchen, ihn per CSS zu entfernen, recht störrisch.

Und es geht doch

Dirk Ginader hat es ganz kurz und trocken getwittert.

Die CSS Anweisung dazu lautet:

input[type=submit]::-moz-focus-inner {border: 1px dotted transparent;}

Ja, genau so. Auch wenn die Syntax fremd erscheint.

Wer nicht generell alle Submit-Buttons stylen will, sondern nur bestimmte mit id oder class ausgezeichnete Buttons, kann die CSS Anweisung natürlich entsprechend abändern. Für einen Button mit der Klasse senden :

.senden::-moz-focus-inner {border: 1px dotted transparent;}
bzw. für einen Button mit der id senden:
#senden::-moz-focus-inner {border: 1px dotted transparent;}

Wichtig: Bitte unbedingt sicherstellen, dass der Fokus, wenn nicht mittels des gepunkteten Rahmens, dann auf andere Art klar kenntlich gemacht wird! Dies ist unentbehrlich für Tastatur-Nutzer, damit sie den Fokus sehen, d. h. wissen, welches Seitenelement gerade aktiv ist.

PS: Kennt jemand eine Methode, den Rahmen auch für Webkit (Chrome, Safari) und Opera zu entfernen. Nach dem IE frag’ ich erst gar nicht. Dort fällt es übrigens gar nicht so sehr ins Gewicht, weil der IE ohnehin den per CSS rund gestalteten Submit-Button nicht darstellen kann.

In diesem Blogbeitrag habe ich erst kürzlich über das nützliche Firefox Add-on “Deutsches Wörterbuch” berichtet.
Was für ein irreführender Name. Das “Deutsch Wörterbuch” lässt sich ganz einfach um weitere Sprachen erweitern. Auf der Seite Wörterbücher und Sprachpakete gibt es für fast alle denkbaren Sprachen Wörterbücher, die sich mit wenigen Klicks in die Rechtschreibprüfung des Firefox integrieren lassen.
Die Wahl der jeweils benötigten Sprache trifft man fallweise im Kontextmenü (Rechtsklick), wenn sich der Cursor in einem Texteingabefeld befindet.


Und schwupps: Schon klappt die Korrekturfunktion auch wenn ich einen Kommentar in einem englischsprachigen Blog poste.

Seit langem statte ich meine Seiten mit einem fürs mobile Surfen optimierten CSS aus. Weil mobil Surfen, so ist jedenfalls mein Eindruck, erst wirklich Spaß macht, seit es das iPhone gibt, habe ich mir auch angewöhnt, die Anzeige gleich auf die verfügbare Breite des Geräts (in der Hochformat-Ansicht) einzustellen.
Dazu dient folgender Meta-Tag:

<meta name="viewport" content="width=320" />
Weil das Display des iPhone eben 320 px in der Breite auflöst.

Aber jetzt kommt das iPhone 4 mit 640 px. Und obiger Meta-Tag wird dazu führen, dass die Anzeige die doppelte Breite des Displays einnimmt, also zu horizontalem Scrollen zwingt. Eine Horrorvorstellung. Was tun?

<meta name="viewport" content="width=640" />
führt auf iPhones < 4 dazu, dass eine Webseite nur noch in Briefmarkengröße dargestellt wird.

Aber Safari stellt eine wesentlich elegantere Methode zur Verfügung:

<meta name="viewport" content="width=device-width, user-scalable=yes" />

Der Wert device-width liest die auf dem Gerät verfügbare Breite aus, anstelle einer festen Angabe in Pixel.
Und user-scalable=yes ermöglicht das Zoomen. Ohne diese Angabe lässt das Meta-Tag Zoomen nicht zu. Ganz Böse! Man wäre auf horizontales Scrollen angewiesen, um die Seite zu lesen.

Demoseite
Die Demo macht natürlich nur mit dem iPhone Sinn, oder einem User Agent Switcher, z. B. diesem Firefox Add-on

Referenz

Anmerkung: Was das iPad mit diesen Angaben wohl macht? Vielleicht könnte mal ein “iPadler” einen Blick darauf werfen.

Eine alte Usability- und Accessibility-Forderung: Besuchte Links kennzeichnen. Und zwar nicht nur farblich.
Auf webdesign weisshart wurde das bisher ganz deutlich in Form eines Häkchens hinter besuchten Links gemacht.

hacks.mozilla.org hat vor einiger Zeit angekündigt, dass der CSS Selector :visited aus Sicherheitsgründen zukünftig nicht mehr unterstützt wird:

For many years the CSS :visited selector has been a vector for querying a user’s history. It’s not particularly dangerous by itself, but when it’s combined with getComputedStyle() in JavaScript it means that someone can walk through your history and figure out where you’ve been. And quickly – some tests show the ability to test 210,000 URLs per minute. At that rate, it’s possible to brute force a lot of your history or at least establish your identity through fingerprinting. Given that browsers often keep history for a long time it can reveal quite a bit about where you’ve been on the web.

At Mozilla we’re serious about protecting people’s privacy, so we’re going to fix this problem for our users. To do so we’re making changes to how :visited works in Firefox. We’re not sure what release this will be part of yet and the fixes are still making their way through code review, but we wanted to give a heads up to people as soon as we understood how we wanted to approach fixing this.

Seit gestern setzt als erster Browser der Safari 5 diese “Drohung” um. Es ist also wohl nur eine Frage der Zeit, bis Firefox nachzieht. Das Häkchen ist damit Geschichte. Es bleibt die farbliche Kennzeichnung. Eine spannende Frage kann ich derzeit nicht testen: Wie sind besuchte Links zukünftig in Screen Readern erkennbar?

Nachtrag: VoiceOver, der Screen Reader von Apple, erkennt besuchte Links, hat mir eben ein Bekannter bestätigt.

Ein Firefox Add-on, das eigentlich auf keinem Rechner fehlen sollte: Deutsches Wörterbuch. Hilfreich, um beim Ausfüllen von Online-Formularen Flüchtigkeitsfehler, Tippfehler und Buchstabendreher zu erkennen.

Von Carsten Knobloch stammt die pfiffige Anleitung um Fehler deutlicher zu markieren.

Weniger bekannt: mit einem Rechtsklick auf den markierten Fehler öffnet sich ein Kontextmenü mit Korrektruvorschlägen und der Option, das irrtümlich als fehlerhaft erkannte Wort dem Benutzerwörterbuch hinzuzufügen.

Eine berechtigte Forderung, wenn es um Usability im Allgemeinen, oder um Barrierefreiheit im Besonderen geht:

Eine Seite soll nicht auf sich selbst verweisen.

Es leuchtet ohne nähere Erklärung ein, dass das folgende Beispiel irritieren kann:

Du bist hier: Startseite - zur Startseite wechseln

Dieses Beispiel findet sich auf einer ansonsten technisch absolut sauber umgesetzten Seite. Der Seitenbetreiber mag mir nachsehen, dass ich ausgerechnet sein Projekt als negatives Beispiel zitiere. Im günstigsten Fall ist er mir für den Hinweis dankbar. Übrigens: Toscho nannte das Problem beim Namen: Deppenlink

Mehr als irritierend kann so etwas für Menschen sein, die nicht den Überblick über den ganzen Bildschirm haben. Zum Beispiel Benutzer von Screen Readern. Idealerweise sollte man die jeweils aktuelle Seite in einer Navigation nicht nur nicht verlinken, sondern auch mit einem Hinweis ausstatten, z. B.: “Standort:". Wie dies gedacht ist, zeigt folgender Screenshot aus der Navigation auf meiner Startseite, mit abgeschaltetem CSS (wie auch Screen Reader die Seite vorlesen):

Aber jetzt mein Rezept gegen den “Deppenlink”

Das Problem: Die Navigation wird per PHP in alle Seiten eingebunden. Immer die gleiche Navigation. Nun muss natürlich PHP entscheiden, welches die jeweils aktuelle Datei ist, und den Link auf sich selbst durch einen unverlinkten Text ersetzen.

Zuerst den Dateinamen der aktuellen Seite in eine Variable:
<?php $a = $_SERVER['PHP_SELF']; ?>


Und dann eine if-else Abfrage, hier am Beispiel eines Links, der zur Seite /index.php führt:

<?php
if ($a!="/index.php") {
echo '<a href="/">Startseite</a>';
} else {
echo '<span class="cur"><dfn>Standort: </dfn>Startseite</span>';
}
?>


Anmerkung:
In der Praxis schreibe ich diese if-else Abfrage in Kurzform. Hier jedoch zugunsten der einfacheren Lesbarkeit die ausgeschriebene Form.

Wozu nun der span class="cur"? Nun, dieser Span kann jetzt individuell per CSS so gestylt werden, dass er zum Design der Seite passt.

Und was hat es mit <dfn>Standort: </dfn> auf sich?
Der Hinweis “Standort:” soll nur von Screen Readern vorgelesen werden.
Eine einfache CSS-Regel erledigt dies:

dfn {
position:absolute;
left:-9000px;
width:0;
height:0;
overflow:hidden;
display:inline;
}


Ich habe das Suchfeld auf dieser Seite mal ein wenig “aufgehübscht". Ohne ein einziges Bild, ausschließlich mit CSS. Und weil inzwischen alle modernen Browser CSS3 unterstützen, habe ich ausgiebig Gebrauch gemacht von den CSS3-Eigenschaften radius, gradient und box-shadow.
Im Browser sieht das Suchfeld so aus:

Demo mit CSS im Quelltext