Recap WordCamp Berlin 2017

Vergangenes Wochenende waren wir in Berlin. Wir waren schon am Donnerstag angereist um beim Contributor Day dabei zu sein.  

Den WPAdminDay am Mittwoch vor dem Camp haben wir damit prompt verpasst. Der WPAdminDay war ein kleines Barcamp für Profi-Admins. Also diejenigen, die Tag für Tag im Hintergrund dafür sorgen, dass die WordPress-Seite stabil und sicher läuft. So weit man hört, kam der WPAdminDay gut an und wir dürfen auf eine Wiederholung hoffen.

Beim Contributor Day am Freitag sind Elisabeth und ich mit „unserem“ Thema Accessibility beim Design-Team untergeschlüpft. Spannend war der Austausch mit Kollegen über die Herausforderungen, die ein barrierefreier Online-Shop in der Praxis so mit sich bringt. Mehrsprachig versteht sich.

Anschließend gab es noch einen kleinen Feuerwehr-Einsatz: Das Team vom WordCamp Kopenhagen hatte einen Hilferuf an die Community gesendet, nachdem zwei Wochen vor dem Start der Veranstaltung das Orga-Team auf eine Person geschrumpft war.

So durfte ich mal eben schnell ein Logo für das WordCamp Kopenhagen entwickeln. Am Samstag hatte das WordCamp Kopenhagen eine überarbeitete Website samt ganz ansehnlichem Logo.

Weiterlesen Recap WordCamp Berlin 2017

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.