Ergänzung für ein Basis-Stylesheet

Vor Kurzem ging ein Hinweis durch Twitter, dass manche Elemente wie mark in einem Screenreader nicht speziell angesagt werden. Die semantische Bedeutung wird demnach für diese Nutzer nicht aus dem Browser transportiert. Für visuelle Nutzer drückt sich das Element mark meist durch einen gelben Hintergrund aus, wie mit einem Textmarker gezogen. Aber da es sich hier nur um ein wenig CSS handelt, kann man dieses Styling auch jedem anderen Element über eine Klasse zuweisen.

Semantische Elemente haben für sehende Nutzer keinen Nutzen. Sie sind für die Entwickler nützlich, weil sich der Code als sinnvolle Gesamtheit lesen lässt. Er hat für die automatische Verarbeitung einen Nutzen und natürlich für assistive Systeme. Für Letztere aber nur, wenn diese dazu in die Lage versetzt werden. In den letzten Jahren habe ich den Eindruck gewonnen, dass sowohl die Screenreader recht unvollkommen programmiert sind, aber auch die Schnittstellen der Browser verbesserungsbedürftig sind. Es gibt zu viele Interpretationslücken. Eventuell fehlt die Manpower. Denn der Screenreader muss natürlich erst einmal die Information vom Browser durchgereicht bekommen. Beide Seite sind also aufgerufen, die bestehenden Lücken zu füllen.

Die Paciello Group (vor allem wohl in Person von Steve Faulkner) sammelt auf einer Seite die (Un-)Fähigkeiten der Screenreader in Bezug auf die Interpretation semantischer Elemente. Dabei gibt es im Bereich „Text“ nur zwei Eintragungen: time und mark. Beide werden nicht von allen Browsern und ihrer Accessibility-API unterstützt. Das time-Element ist im IE nicht implementiert, kann deshalb auch in einem Screenreader, der auf diesem Browser aufsetzt, nicht angesagt werden. Beim mark-Element ist die Front der Browser, die das Element nicht an die Screenreader weiterreichen, obwohl es implementiert ist, größer: Firefox und IE haben kein Mapping für dieses Element. Beim IE wird sich dies nicht mehr ändern, da der Browser nicht mehr weiter entwickelt wird. Beim Firefox ist es enttäuschend, dass sich an dieser Front seit etwa drei Jahren nichts tut.

Steve Faulkner kam angesichts des oben erwähnten Tweets auf einen prima Workaround, den Adrian Roselli dann auf auf mehrere Elemente erweiterte. Der Workaround funktioniert rein über CSS. Er nutzt generierten Content, der im ::before-Pseudoelement den Beginn und im ::after-Pseudoelement das Ende eines speziellen Abschnitts ansagt. Die Texte werden per CSS visuell versteckt:

/* Text visuell verstecken */
mark::before, mark::after, del::before, del::after,
ins::before, ins::after, s::before, s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

Sodann werden die Anfangs- und Endtexte vergeben:

mark::before { content: " [Start der Markierung] ";}
mark::after { content: " [Ende der Markierung] ";}

Für eine Lokalisierung hat er den adäquaten und naheliegenden Vorschlag:

*[lang=en] mark::before { content: " [highlight start] ";}
*[lang=en] mark::after { content: " [highlight end] ";}

Eigentlich ist es keine gute Idee, den Text des Pseudoelements direkt ins CSS zu schreiben. Doch da es hier um die allgemeine Ankündigung von HTML-Elementen geht, benötigen wir keine individuelle Anpassung. Und die Arbeit mit dem lang-Attribut ist sinnvoll.

Im Artikel führt Adrian für die anderen Elemente ebenso Vorschläge auf. Eine sehr interessante Idee, die man ohne viele Probleme in ein Basis-Stylesheet aufnehmen kann.

3 Kommentare

  1. Sollte man statt *[lang=xx] mark::before nicht eher mark:lang(xx)::before benutzen? Das deckt automatisch auch den Fall ab, dass (warum auch immer) das lang-Attribute dem mark-Element zugewiesen wurde.
    Demo

    • Deine Idee ist nicht schlecht.

      Aber die Zielrichtung ist ja nicht die Reaktion auf Sprachwechsel, sondern auf die Standardsprache. Das erscheint mir zielführender. Es geht ja nur darum, dass einige wenige Elemente ganz grundsätzlich nicht angesagt werden. Vollkommen unabhängig, ob abseits der Dokumentensprache ein Sprachwechsel vorliegt.

      Es dreht sich also nur darum, dass in grundsätzlich englischsprachigen Dokumenten die wenigen nicht unterstützen Elemente auf Englisch angekündigt werden, in deutschen auf Deutsch und in französischen auf Französisch. Vollkommen unabhängig davon, in welcher Sprache der markierte Text dann vorliegt.

  2. Das leistet *[lang=en] mark::… aber auch nicht. Beispiel:


    *[lang=de] mark::before { content: " [Start der Markierung] ";}
    *[lang=en] mark::before { content: " [highlight start] ";}


    <html lang="de">…
    <p>Im Original heißt es: <q lang="en">There are four ways to apply different styles to different languages in a multilingual document using CSS. They are listed here <mark>in order of preference<mark>.</q></p>
    <p>In der deutschen Übersetzung heißt es: <q>Es gibt vier Möglichkeiten, um mit CSS verschiedene Stile für verschiedene Sprachen innerhalb eines mehrsprachigen Dokuments zuzuweisen. <mark>Nach der bevorzugten Verwendung geordnet</mark> sind dies: …</q></p>

    Das erste mark-Element ist sowohl Nachfahre eines Elements mit lang="de" als auch eines Elements mit lang="en"; die letzte Regel gewinnt und das Element wird fälschlicherweise englisch angesagt.

    Statt * muss es in den Selektoren html oder :root heißen. Außerdem sollte man i.d.R. nicht [lang] verwenden, sondern :lang(). Einzelheiten dazu im Artikel Stylen anhand von Sprachattributen (aus dem auch das Zitat stammt).

    Also:


    :root:lang(de) mark::before { content: " [Start der Markierung] ";}
    :root:lang(en) mark::before { content: " [highlight start] ";}