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.