Redaktionelle Umsetzung der Barrierefreiheit
Auf dieser Seite finde sich Hinweise, um die Barrierefreiheit redaktionell umzusetzen. Diese Liste kann und sollte kontinuierlich fortgeführt werden.
Anmerkung: Wenn Inhalte auf dieser Seite neu erstellt oder deaktiviert werden, bitte den Entwicklern bescheid geben, da es im Fontend-Analyse-Tool statische Verlinkungen zu den einzelnen Einträgen gibt. Diese Links müssen bei solchen Änderungen angepasst werden.
Linktexte vergeben
In vielen Inhaltselementen ist es möglich direkt neben der Verlinkung einen Linktext einzugeben. Der Linktext sollte immer aussagen, was passiert, wenn man auf diesen Link klickt. Zum Beispiel: Link zur Seite xy. Wenn das Feld ausgefüllt wurde und der Linktext spezifisch genug ist, muss kein zusätzlicher Titel am Link angeben werden.
Gerade bei Teaser ist dies nicht gewünscht und der Text “mehr anzeigen” soll bestehen bleiben. Dieser Linktext ist zu generisch und taucht immer wieder auf. Hier muss ein Titel am Link vergeben werden, der dem Nutzer oder der Nutzerin genau sagt, was bei dem Link passiert. Wenn ein Link platziert wird, öffnet sich immer der Link-Browser. Hier befindet sich das Eingabefeld Titel. An dieser Stelle muss dann passendender Title eingetragen werden, zum Beispiel:
- Link zur Seite: xy
- Download von PDF xy
- Zur Demokratiewerkstatt xy
Redundante Linktexte
Redundante Linktexte ergeben sich, wenn der Linktext und der Titel des Link den gleichen Inhalt haben. Diese muss vermieden werden, da der Screenreader sonst zweimal das Gleiche vorliest.
Redundante Links
Redundante Links sind mehrere Verlinkungen innerhalb eines Inhaltselementes, die zum gleichen Ziel verlinken. Dies muss vermieden werden, da für assisitve Technologien doppelte Ansagen von Links und unnötige Tabstopps entstehen. Dies beeinträchtigt die Nutzerfreundlichkeit für Menschen mit assistiven Hilfsmitteln.
Externe Verlinkungen im Text
Bei externen Verlinkungen muss ersichtlich sien, dass die Links zu einer neuen Seite führen. Das Attribut target:_blank reicht leider nicht aus.
Entweder muss im Linktext die Anmerkung “(öffnet sich in einem neuen Fenster”) oder aber ein Titel platziert werden. Dieser Titel gibt wieder das Linkziel an, zum Beispiel “Link öffnet die Seite xy" oder “Link öffnet ein neues Fenster für die Seite xy”.
Beispiele:
Torquent purus condimentum (öffnet in einem neuen Fenster) eget fringilla fermentum commodo sodales arcu. Vitae ex dapibus erat turpis purus. Nam magna ad bibendum tempor vulputate nunc donec vehicula nisl ex. Mi vulputate odio curabitur natoque nisl et tellus primis vestibulum dolor.
Suspendisse laoreet fermentum duis letius natoque etiam porttitor nascetur nisl. Netus molestie quisque tortor libero elementum dictumst risus porttitor facilisis. Integer consectetur ridiculus sociosqu felis sit potenti adipiscing euismod condimentum. Scelerisque maecenas nec phasellus sed accumsan.
Überschriftenhierarchie
Überschriften strukturieren Inhalte und helfen allen Nutzenden – insbesondere Menschen mit Screenreadern – sich auf einer Seite schnell zu orientieren. Auf eine logisch aufgebaute Überschriftenhierarchie ist daher zu achten.
Grundregeln:
- pro Seite nur eine H1 verwenden. Diese ist die Hauptüberschrift der Seite.
- Nach einer H1 folgen H2-Überschriften für die Hauptabschnitte.
- Unterabschnitte einer H2 erhalten eine H3.
- Unterabschnitte einer H3 erhalten eine H4 usw.
- Es dürfen keine Überschriftenebenen übersprungen werden.
Es müssen nicht alle Überschriftenebenen verwendet werden.
Überschriften dienen nicht der Gestaltung, sondern der Strukturierung des Inhalts. Die Überschriftenebene sollte daher immer nach der inhaltlichen Bedeutung ausgewählt werden, nicht nach der gewünschten Schriftgröße oder Optik. Dazu wird im Auswahlfeld Typ die richtige Ebene ausgewählt.
Wenn die Schriftgröße oder Optik nicht passt, kann im Auswahlfeld Header-Class das Aussehen der Überschrift angepasst werden. Im Feld Typ wird sozusagen die tatsächliche Überschriftenebene ausgewählt und im Feld Header-Class kann die optisch gewünschte Überschriftenebene ausgewählt werden. Dadurch kann eine H2-Überschrift das Aussehen einer H4- oder H5-Überschrift bekommen.