Barrierefreie Inhalte

Web Content Accessibility Guidelines (WCAG) 2.1 ist ein Standard, der verwendet wird, um sicherzustellen, dass Websites für alle barrierefrei sind. Anstatt auf spezielle Bedürfnisse von Menschen mit unterschiedlichen Behinderungen einzugehen, können die Richtlinien als eine Möglichkeit gesehen werden, Websites für jedermann einfacher zu nutzen, zu verstehen und zu navigieren. Verschiedene Länder haben unterschiedliche Rechtsvorschriften in Bezug auf die Barrierefreiheit.

Barrierefreiheit in Arena

Dieses Thema konzentriert sich auf Methoden, mit denen Sie Ihre Arena-Website für Screenreader besser geeignet machen können. Dies ist einer der Aspekte der Barrierefreiheit. Es wird empfohlen, an Arena-Schulungen teilzunehmen, um diese Methoden vollständig zu verstehen. HTML-Grundkenntnisse sind ebenfalls hilfreich.

Anzeige des HTML-Codes anstelle des Texteditors

Der HTML-Code enthüllt die Struktur und Elemente der Webseite. Normalerweise müssen Sie nicht im HTML-Modus arbeiten, dies kann jedoch zur Überprüfung und Fehlerbehebung hilfreich sein.

  • Um den HTML-Modus beim Schreiben von Inhalten für einen Artikel zu aktivieren, klicken Sie in der Symbolleiste auf Quelle.

Überschriftenstruktur

Es ist wichtig, eine logische Überschriftenstruktur zu verwenden, unabhängig von Thema, Website oder Webanwendung. Eine logische Überschriftenstruktur impliziert beispielsweise, dass auf den Überschriftenstil <h1> <h2>, <h3>, <h4> in dieser Reihenfolge folgen - Sie können <h6> nicht verwenden, bevor Sie ein <h5> verwendet haben. Wenn Sie Inhalte hinzufügen oder löschen, müssen Sie die Struktur berücksichtigen.

Neue Artikel

Wenn Sie das Portlet Darstellung von Webinhalten zu einer Seite hinzufügen, bedeutet die grafische Einstellung Decorate oder Borderless, dass der Titel von Darstellung von Webinhalten auf dem Bildschirm als <h2> gerendert wird, was korrekt ist. Wenn Sie Textinhalte hinzufügen, verwenden Sie <h3>, <h4>, <h5> und die Anzahl der Überschriftenebenen, die Sie benötigen, um sicherzustellen, dass die Struktur beibehalten wird.

Es wird empfohlen, die Einstellung Borderless zu verwenden.

Wenn Sie aus irgendeinem Grund den Titel des Portlets nicht anzeigen möchten, können Sie stattdessen die Grafikeinstellung Barebone auswählen. In diesem Fall enthält das Portlet nicht die natürliche Ebene <h2>, und Sie müssen diese manuell zum Inhalt hinzufügen.

Wenn Sie im Texteditor arbeiten, stehen die Überschriftenstile Heading 1 (h1), Heading 2 (<h2>), Heading 3 (<h3>) und Heading 4 (<h4>) zur Verfügung.

Verwenden Sie niemals Überschrift 1 für Inhalte. Verwenden Sie Überschrift 2 nur, wenn Sie die Grafikeinstellung Barebone auswählen. Verwenden Sie Normal (<p>) für Textkörper. Wenn Sie mehr Überschriftenebenen benötigen (<h5>, <h6> usw.), müssen Sie diese im HTML-Modus hinzufügen.

Der Inhalt des obigen Artikels würde in HTML mit der grafischen Einstellung Dekorieren folgendermaßen aussehen:

<h3>Meine Überschrift</h3>
<p>Etwas Text</p>
<h4>Meine Unterüberschrift</h4>
<p>Noch mehr Text</p>

In einem Artikel mit der Grafikeinstellung Barebone müssten Sie dem Inhalt manuell eine <h2>-Überschrift hinzufügen:

<h2>Meine oberste Überschrift</h2>
<h3>Meine Überschrift</h3>
<p>Etwas Text</p>
<h4>Meine Unterüberschrift</h4>
<p>Noch mehr Text</p>

Bilder

Ein Bild sollte immer ein alt-Attribut enthalten, das das Bild beschreibt.

Wenn Sie beispielsweise ein Bild wie dieses in Arena hinzufügen, sollte der HTML-Code z. B. Folgendes enthalten:

<img src=”url-to-horse-image.jpg” alt=”Ein im Schnee springendes Pferd”>

Um stattdessen einen Link zu einem Wikipedia-Artikel über verschiedene Pferderassen zu erstellen, würde der Bildlink ungefähr so aussehen:

<a href=” https://en.wikipedia.org/wiki/List_of_horse_breeds”>
<img src=”url-to-horse-image.jpg” alt=”Ein im Schnee springendes Pferd”>
</a>

Jetzt, wo das Bild einen Link enthält, wird stattdessen das Ziel des Links beschrieben.

Wenn Sie ein Bild nur zur Dekoration hinzufügen, sollten Sie ein leeres alt-Attribut hinzufügen:

<img src=”ball.jpg” alt=””>

Kopieren und Einfügen von formatiertem Text

Wenn Sie beispielsweise Text von Microsoft Word kopieren, kopieren Sie nicht nur den Text, sondern auch dessen Formatierung. Diese Formatierung kann unstrukturierten HTML-Code und unerwünschtes Verhalten auf der Website erzeugen.

Um zu vermeiden, dass Formatierungen in Arena-Artikel eingefügt werden, können Sie den Text aus Microsoft Word oder einem anderen Texteditor kopieren und im HTML-Modus im Portlet Darstellung von Webinhalten einfügen. Anschließend können Sie den Text selbst über den Texteditor oder im HTML-Modus formatieren.

Nützliche Links

Es gibt eine Fülle von Informationen zur Barrierefreiheit im Internet. Einige Beispiele:

Arena-Bericht zur Barrierefreiheit

Wir haben ein Dokument vorbereitet, das die Bibliothek als Grundlage für einen Bericht zur Barrierefreiheit in Bezug auf die Arena-Website verwenden kann: Arena-Bericht zur Barrierefreiheit. Ersetzen Sie den gesamten Text in Klammern durch die korrekten Informationen für Ihre Bibliothek und entfernen Sie die Teile, die für Ihre Bibliothek nicht gültig sind (je nachdem, welches Gestaltungsthema verwendet wird).