Pseudo-Klassen a:visited, a:hover, a:focus und a:active

Was a:hover bedeutet, weiss jeder, der mal die Nase an eine CSS-Datei gehalten hat. Die Pseudo-Klassen a:visited, a:focus und a:active sind weit weniger bekannt. Mir war jedenfalls lange nicht klar, was die Angaben genau bewirken.

a:hover

Über den Selektor a spricht man im CSS einen Link an, mit a:hover lässt sich dem Link ein Effekt mitgeben, der auftritt, sobald die Maus drüberfährt. In Beispiel unten ändert sich die Farbe des Links von Rot in Blau.

a {color: red;}
a:hover {color: blue;}

For the record: Auf Touch-Geräten funktioniert der hover-Effekt nicht.

Was ist der Unterschied zwischen a und a:link?

In manchen CSS-Dateien findet man die Schreibweise a:link {…} anstatt von a {…}.
Die Pseudo-Klasse a:link bezieht sich auf Anchor-Elemente, die ein href-Attribut haben. Was ein bisschen sinnfrei ist, denn dieses Attribut sollte jeder Link haben. Ein Link ist – ein Link und verweist immer auf eine interne oder externe URL.
Wenn nur eine Aktion durch Anklicken ausgelöst werden soll, ist button das Tag der Wahl. Ein Button triggert eine JavaScript-Aktion oder ist Teil eines Formulars.

Wer korrektes HTML pflegt, kann also getrost a statt a:link schreiben.
Weiterlesen Pseudo-Klassen a:visited, a:hover, a:focus und a:active

Microsoft’s Richtlinien für inklusives Design

Die Grafik ist einfach großartig.
Der folgende Text stammt von der Microsoft Website. Es gibt ihn bisher nur auf englisch.

Our inclusive design principles

Recognize exclusion

Exclusion happens when we solve problems using our own biases. As Microsoft designers, we seek out those exclusions, and use them as opportunities to create new ideas and inclusive designs.

Learn from diversity

Human beings are the real experts in adapting to diversity. Inclusive design puts people in the center from the very start of the process, and those fresh, diverse perspectives are the key to true insight.

Solve for one, extend to many

Everyone has abilities, and limits to those abilities. Designing for people with permanent disabilities actually results in designs that benefit people universally. Constraints are a beautiful thing.

Quelle: Inclusive Design at Microsoft

Was ist eigentlich dieser “Skip to content”-Link?

In den WordPress-Standard-Themes der Twenty-Reihe sitzt in der header.php kurz nach dem body-tag ein Skip-To-Content-Link.

<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

Diesen Link sieht man normalerweise nicht. Er wird erst sichtbar und aktiv, wenn jemand die Tastatur nutzt um durch die Seite zu navigieren. Probiert es mal aus, den Skip-Link gibt es auch hier auf dieser Seite.

Zugang per Tastatur

Die Navigierbarkeit per Tastatur ist ein zentrales Kriterium für Barrierefreiheit. Mit der Tastatur bewegen sich nicht nur Screenreader über die Seite. Auch Menschen, die keine Maus bedienen können, bewegen sich via Tab-Taste. Weil sie Arthritis in den Händen haben, weil sie keine Arme haben oder weil sie den rechten Arm vier Wochen lang im Gips tragen.

Und wozu braucht es diesen Link jetzt?

Angenommen, ich habe das Excerpt eines Artikels gelesen und möchte jetzt die ganze Version lesen. Ich steuere mit der Tastatur den Read-More-Link an, der Browser öffnet die Seite mit der Einzelansicht des Artikel.

Gäbe es nun den Skip-to-Content-Link nicht, müsste ich mich in der Einzelansicht erst mal durch den gesamten Header-Bereich durchackern. Ich müsste alle Elemente – Logo, Seitentitel, Navigation, Suchfeld – der Reihe nach anklicken bevor ich endlich beim Artikel landen würde. Die Tab-Taste arbeitet sich stur von links oben nach rechts unten durch den Code.
Ist dagegen ein Skip-Link vorhanden, kann ich sofort an die Stelle springen, die mich interessiert.

Aus diesem Grund sollte jede Webseite einen Skip-Link zur Verfügung stellen.
Ein Codebeispiel gibt’s im Accessibility-Handbuch.

Tipps für eine barrierefreie Webseite

Wie viele Leute verwenden wohl einen Screenreader um diese Webseite zu betrachten? Der Anteil dürfte im niedrigen einstelligen Prozentbereich liegen. Warum also so viel Aufwand für eine so kleine Benutzergruppe?
Weil es nicht um Screenreader geht. Sondern um Usability.

Wer profitiert von einer barrierefreien Webseite?

  • Menschen mit einer Sehbehinderung, die starke Kontraste auf ihrem Bildschirm brauchen
  • Menschen, die im hellen Sonnenlicht eine Adresse auf ihrem Smartphone lesen wollen
  • Menschen, die per Tastatur statt Maus navigieren, weil sie keine Arme haben
  • Menschen, die per Tastatur statt Maus navigieren, weil sie Rheuma in den Händen haben oder ihr rechter Arm vorübergehend einen Gipsverband hat
  • Menschen, die eine geistige Behinderung haben
  • Menschen mit einem Hochschulabschluss, deren Muttersprache nicht Deutsch ist
  • Menschen, die eine Aufmerksamkeitsstörung haben und sich schlecht konzentrieren können
  • Menschen, die nach einem langen Arbeitstag müde sind und sich schlecht konzentrieren können
  • Alte Menschen, die unsicher sind und leicht die Orientierung auf der Webseite verlieren
  • Junge Menschen, die unsicher sind und leicht die Orientierung auf der Webseite verlieren

Weiterlesen Tipps für eine barrierefreie Webseite