Bewährte Praktiken für HTML and CSS
===================================
Code und Navigation strukturieren
---------------------------------
Denkt bei der Strukturierung eurer Inhalte an die Code-Hierarchie, damit
Screen Reader und Personen, die nur über die Tastatur verfügen, über Tabulatoren
in einer logischen und vorhersehbaren Reihenfolge auf interaktive Elemente
zugreifen können. Beginnt mit der Kopfzeile, gefolgt von der Hauptnavigation,
dann der Seitennavigation (von links nach rechts und von oben nach unten) und
enden Sie mit der Fußzeile. Ziel ist es, Personen über die Tastatur eine
vergleichbare Benutzung zu ermöglichen wie Personen, die eine Maus benutzen.
Semantisches HTML
-----------------
Verwendet native HTML-Elemente so oft wie möglich und verwendet sie für den
richtigen Zweck. Diese Elemente bieten integrierte Vorteile für die
Barrierefreiheit. Sie informieren Personen mit Screen-Reader darüber, wo sie
sind und welche Interaktionen ihnen in diesem Kontext zur Verfügung stehen.
Abgesehen von einer erhöhten Zugänglichkeit werden die Seiten auch einfacher zu
entwickeln und zu warten sein, besser auf Mobilgeräten funktionieren und die
Suchmaschinenoptimierung verbessern.
.. code-block:: html
Page Title
My Blog Posts
Article Title
content
Article Title
content
Klare Sprache
-------------
Berücksichtigt beim Hinzufügen von Inhalten kognitive Einschränkungen,
Personen, deren Erstsprache nicht die Sprache ist, in der Ihre Inhalte
geschrieben sind und Personen, die sich die Inhalte mit einem Screen-Reader
erschließen. Vermeidet nach Möglichkeit Bindestriche, Abkürzungen, Akronyme
(zumindest beim ersten Mal) und Tabellenlayouts, wenn keine Tabelleninhalte
vorhanden sind. Verwendet bei Abkürzungen das native ````-Element mit dem
``title``-Attribut.
.. code:: html
HTML
In Sphinx könnt Ihr dies erreichen mit der ``abbr``-Rolle::
:abbr:`HTML (HyperText Markup Language)`
Aussagekräftige Textbeschriftungen
----------------------------------
Berücksichtigt beim Beschriften von Elementen sehbehinderte Personen und stellt
sicher, dass für Screen-Reader ein Textkontext vorhanden ist.
.. code-block:: html
Zugängliche Tabellen
--------------------
* Gebt Tabellenüberschriften immer mit ``
``-Elementen an und stellt sicher,
dass sie herausragen.
* Verwendet bei Bedarf das Attribut ``scope`` um anzugeben, ob es sich um
Überschriften für Zeilen oder Spalten handelt.
* Verwendet alternativen Text zusammen mit Tabellen für sehbehinderte Personen.
* Für die Beschreibung der Tabelle wird ``
`` bevorzugt, aber
``
`` funktioniert auch.
Unterscheiden zwischen Mäusen und Touchscreens
----------------------------------------------
Ihr könnt die Gestaltung von Links, Tasten :abbr:`etc. (etcetera)` einfach mit
der `hover `_-Funktion variieren,
je nachdem ob euer Publikum eine Maus oder einen Touchscreen verwendet. Dies
funktioniert in den meisten aktuellen Browsern gut, bei einigen
Android-Versionen emuliert langes Drücken jedoch *Hover*, sodass die
Medienabfrage ``hover: hover`` wahr bewertet wird. Daher sollte auch noch eine
zweite Abfrage nach ``pointer: fine`` erfolgen:
.. code-block:: css
.some-component {
/* Stil für Touchscreens, einschließlich Android-Geräte */
}
@media (hover: hover) and (pointer: fine) {
.some-component {
/* Stil für Mäuse und ähnliche Geräte */
}
}
.. seealso::
* `Media features
`_
* `Detecting Hover-Capable Devices
`_
Multimedia-Textalternativen
---------------------------
Jedes Bild, das nicht dekorativ ist, sollte mit ``alt``-Text und einer
aussagekräftigen Beschreibung des Bildes sowie einem ``title``-Attribut versehen
sein. Ihr könnt auch `aria-labelledby
`_
zusammen mit dem ``id``-Attribut verwenden.
Für dekorative Bilder solltet ihr ein leeres ``alt``-Attribut verwenden, da
andernfalls der Screen-Reader die gesamte Bild-URL liest.
Audio-Alternativen
------------------
Stellt Videos mit Untertiteln oder Transkriptionen in Audiodateien bereit:
.. code-block:: html
Schriftsymbolbibliotheken
-------------------------
Wir sind bei der Verwendung von Schriftsymbolbibliotheken auf zwei verschiedene
Anwendungsfälle gestoßen, die ihr berücksichtigen solltet:
Dekorative Symbole
werden nur zu dekorativen Zwecken verwendet. Wenn sie von der Seite entfernt
würden, würden Personen Eure Seite weiterhin verstehen und verwenden
können.
In diesem Fall kann dem Element ein ``aria-hidden="true"``-Attribut
hinzugefügt werden, :abbr:`z.B. (zum Beispiel)`:
.. code-block:: html
Semantische Symbole
sind solche, mit denen bedeutendes vermittelt werden soll, :abbr:`z.B. (zum
Beispiel)` für Button, Formularelemente :abbr:`etc. (etcetera)`
Neben dem ``aria-hidden="true"``-Attribut sollten zwei weitere Ergänzungen
hinzugefügt werden:
* eine Textalternative :abbr:`z.B. (zum Beispiel)` in einem ````-Tag,
das via CSS ausgeblendet wird.
* ein ``title``- Attribut auf dem Symbol, um einen Tooltip für sehende
Personen bereitzustellen.
.. code-block:: html
"Delete this item?
Alternativ kann SVG mit JavaScript verwendet werden mit. In diesem Fall wird
durch das ``title``-Attribut folgende drei Elemente hinzugefügt:
* ARIA-Rolle ``role="img"``
* ``title``-Tag mit ``id``-Attribut
* ``aria-labelledby``-Attribut
Aus
.. code-block:: html
wird
.. code-block:: html
.. seealso::
* Sara Soueidan: `Accessible Icon Buttons
`_
* `Font Awesome Accessibility
`_