Musterseite
Hinweise zur Erstellung barrierefreier Webseiteninhalte
Generell:
- Überschriftenhierarchie einhalten
- Keine unnötigen Leerzeichen einfügen, um Abstand zu erzeugen
- Keine unnötigen Leerzeilen einfügen (ggf. Abstandshalter verwenden)
Bilder
- Generell: Sinnvolle Bildbezeichnungen, sinnvolle Bildgrößen, jpg-Format (außer bei Icons, Logos etc.)
- Unterscheidung inhaltsrelevante Bilder (Alt-Text ist erforderlich), Schmuckbilder
- Keine Text-Informationen in Bildern (Text als Content aufbereiten)
PDF-Downloads
- Inhalte alternativ oder zusätzlich als Content übernehmen, wenn möglich
- PDFs als nicht barrierfrei kennzeichnen (erfolgt automatisch)
Links
- „Sprechende“ Links verwenden, die erkennbar machen, was sich hinter dem Link verbirgt
- Gleichlautende Links wie „hier“ oder „Website besuchen“ vermeiden.
Sprachwechsel
- Fremdsprachige Begriffe auszeichnen (wenn Begiffe nicht im deutschen Sprachgebrauch etabliert sind)
Abkürzungen
- Abkürzungen müssen so ausgezeichnet werden, dass ein Screenreader sie in verständlicher Form vorlesen kann.
- Einfachste Lösung: Wort ausschreiben, dann erübrigt sich die Auszeichnung (Beispiele: Telefon, Straße anstatt Tel., Str.).
- Bei Abkürzungen, die allgemein bekannt sind, reicht die Kennzeichnung als Abkürzung (Beispiel: GmbH).
- Bei Abkürzungen, die in der ausgeschriebenen Form vorgelesen werden sollen (Beispiel: Dr.), muss zusätzliche das ausgeschriebene Wort hinterlegt werden.
- Werden Abkürzungen als Wort gelesen (Beispiel: NATO, DATEV) ist keine Auszeichnung erforderlich.
Sonderzeichen
- Auf richtige Sonderzeichen achten, z. B. Anführungszeichen unten und oben, Multiplikationszeichen, Gedankenstrich usw.
Überschrift 2
Lorem ipsum {test} dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cuiis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, eu, pretium quis, sem nulla consequat mam. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Das ist die Überschrift 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
Das ist die Überschrift 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
Das ist die Überschrift 4, 5 und 6
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
Aufzählung Standard
- Dictum felis eu pede mollis pretium. Aenean vulputate eleifend tellus.
- Integer tincidunt. Cras dapibus.
- Vivamus elementum semper nisi.
- Aenean vulputate eleifend tellus.
- Aenean leo ligula, porttitor eu, consequat vitae, e leifend ac, enim
Aufzählung Kreis
- Dictum felis eu pede mollis pretium. Aenean vulputate eleifend tellus.
- Integer tincidunt. Cras dapibus.
- Vivamus elementum semper nisi.
- Aenean vulputate eleifend tellus.
- Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim
Aufzählung Quadrat
- Dictum felis eu pede mollis pretium. Aenean vulputate eleifend tellus.
- Integer tincidunt. Cras dapibus.
- Vivamus elementum semper nisi.
- Aenean vulputate eleifend tellus.
- Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim
Aufzählung Punkt
- Dictum felis eu pede mollis pretium. Aenean vulputate eleifend tellus.
- Integer tincidunt. Cras dapibus.
- Vivamus elementum semper nisi.
- Aenean vulputate eleifend tellus.
- Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.
- Dictum felis eu pede mollis pretium. Aenean vulputate eleifend tellus.
- Integer tincidunt. Cras dapibus.
- Vivamus elementum semper nisi.
- Aenean vulputate eleifend tellus.
- Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
Das ist die Überschrift 4
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
