Barrierefreiheitskriterien in WebSite X5

WebSite X5 hilft jedem, auch Personen ohne technische Kenntnisse, eine vollständige, professionelle Website zu erstellen, die für Suchmaschinen, mobile Navigation und auch barrierefrei optimiert ist. Für Nicht-Entwickler kann es komplex oder sogar unmöglich sein, den Code von Webseiten so anzupassen, dass er den Barrierefreiheitsanforderungen entspricht. Deshalb übernimmt WebSite X5 automatisch viele technische Aspekte der Barrierefreiheit und ermöglicht es, Websites ohne eine einzige Zeile Code zu schreiben.

In dieser Anleitung sehen wir uns im Detail an, welche Barrierefreiheitskriterien WebSite X5 unterstützt und wie sie implementiert werden.

WebSite X5 und WCAG: welche Kriterien werden implementiert und wie

Wie bekannt, wird die Barrierefreiheit im Web durch die Web Content Accessibility Guidelines (WCAG) geregelt, eine Reihe von Richtlinien, die vom World Wide Web Consortium (W3C) entwickelt wurden, um sicherzustellen, dass digitale Inhalte für alle, einschließlich Menschen mit Behinderungen, zugänglich sind.

Die WCAG-Richtlinien basieren auf vier grundlegenden Prinzipien (Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit) und enthalten Erfolgskriterien, die in drei Konformitätsstufen (A, AA und AAA) unterteilt sind.

Konkret orientiert sich WebSite X5 an der WCAG 2.0 Version, wobei WCAG 2.1 und 2.2 Erweiterungen dieser Version darstellen. Es implementiert 15 der 25 Kriterien der Stufe A sowie 3 zusätzliche Kriterien aus anderen WCAG-Versionen/-Stufen. Die implementierten Kriterien werden folgendermaßen behandelt:

• Automatisch → WebSite X5 stellt die Einhaltung automatisch sicher, ohne dass der Benutzer eingreifen muss, indem es korrekten und standardkonformen Code generiert.
• Mit unterstützter Implementierung → WebSite X5 bietet Werkzeuge zur Unterstützung der Barrierefreiheit, erfordert jedoch die Mitwirkung des Benutzers. Beispielsweise bietet WebSite X5 eine Option zur Eingabe alternativer Texte für Bilder, aber der Website-Ersteller muss eine geeignete Beschreibung eingeben.

WebSite X5 kann keine Erfolgskriterien umsetzen, die vollständig von den Entscheidungen des Website-Erstellers abhängen. Viele dieser Kriterien gehören jedoch zur Stufe AAA, die als fortgeschritten gilt und nicht immer gesetzlich vorgeschrieben ist.

Konkret sind die Barrierefreiheitskriterien, die von WebSite X5 automatisch oder mit Unterstützung implementiert werden, folgende:

• 1.1.1 Nicht-textueller Inhalt
• 1.3.1 Informationen und Beziehungen
• 1.3.2 Bedeutungsvolle Reihenfolge
• 1.3.4 Bildschirmausrichtung
• 2.1.1 Tastatur
• 2.1.2 Keine Tastaturfalle
• 2.1.4 Tastenkürzel
• 2.4.1 Blöcke überspringen
• 2.4.2 Seitentitel
• 2.4.3 Fokusreihenfolge
• 2.4.4 Zweck des Links (im Kontext)
• 3.1.1 Sprache der Seite
• 3.2.1 Beim Fokus
• 3.3.1 Fehlererkennung
• 3.3.2 Beschriftungen oder Anweisungen
• 4.1.1 Syntaxanalyse (Parsing)
• 4.1.2 Name, Rolle, Wert

1.1.1 Nicht-Text-Inhalt

Die Richtlinie 1.1 verlangt, dass für alle nicht-textlichen Inhalte eine Textalternative bereitgestellt wird, damit diese in andere für die Nutzer zugängliche Formen umgewandelt werden können: Braille, Sprachausgabe, Symbole usw.

Um das Erfolgskriterium 1.1.1 zu erfüllen, ermöglicht WebSite X5 das Hinzufügen von Textalternativen für alle nicht-textlichen Elemente (Bilder, Animationen, Videos, Audio), die importiert werden, mit Ausnahme rein dekorativer Elemente, für die keine Alternativtexte erforderlich sind (siehe: Wie man Alternativtexte für nicht-textliche Inhalte schreibt). Die Textalternativen für grafische Elemente, die von der Software generiert werden, werden hingegen automatisch eingefügt, z. B. für Navigationsschaltflächen in Galerien oder für Symbole und Schaltflächen in Blogartikeln und E-Commerce-Produktkarten.

Wie vorgeschrieben, werden alle Textalternativen im Seitenquellcode über die HTML-Attribute alt, title, aria-label und/oder aria-labelledby eingefügt. Die HTML-Elemente <label> sowie die HTML-Attribute aria-label, aria-labelledby und aria-describedby werden ebenfalls für alle Eingabefelder verwendet (Suchfelder auf der Website und im Produktkatalog, Login- und Registrierungsseiten, Kontaktformular-Objekte), um Anweisungen zur korrekten Nutzung bereitzustellen.

#Tipp - Das Erfolgskriterium 1.1.1 berücksichtigt auch Captchas. Derzeit ist das Captcha von WebSite X5 noch nicht barrierefrei. Es wird daher empfohlen, Google reCaptcha zu verwenden. Siehe: Wie wählt man das richtige CAPTCHA für die Website?.

1.3.1 Informationen und Beziehungen

Die Richtlinie 1.3 verlangt, dass Inhalte in verschiedenen Darstellungsformen wiedergegeben werden können (z. B. mit einfacheren Layouts), ohne dass dabei Informationen oder die Struktur verloren gehen.

Insbesondere fordert das Erfolgskriterium 1.3.1, dass Beziehungen, Strukturen und Zusammenhänge, die auf einer Webseite visuell erkennbar sind, auch "programmatisch" definiert werden, also über den Code, damit sie erhalten bleiben, wenn die Seite in einer anderen Darstellung angezeigt wird.

Um dieses Kriterium zu erfüllen, muss der Code für Webseiten semantisch korrekt generiert werden.

WebSite X5 erfüllt dieses Erfolgskriterium automatisch, indem es die richtigen Tags verwendet und Informationen entweder durch Nähebeziehungen oder durch speziell dafür vorgesehene Attribute verknüpft. Die Nutzung semantischer HTML-Elemente (<a>, <button>, <input>, <dialog>, <nav>, <article>, …) und/oder das HTML-Attribut role zur Identifizierung der verschiedenen Seitenbereiche ermöglicht es Screenreadern und anderen Navigationshilfen, die Funktion jedes Elements zu erkennen und Nutzern eine schnellere Navigation zu ermöglichen.

1.3.2 Bedeutungsvolle Reihenfolge

In Bezug auf die Richtlinie 1.3 verlangt dieses spezifische Erfolgskriterium, dass die Reihenfolge der dargestellten Inhalte auch programmatisch (d. h. über den Code) festgelegt wird, wenn sie deren Bedeutung beeinflusst.

Dieses Kriterium wird im unterstützten Modus gelöst, da WebSite X5 dem Webseitenautor die Möglichkeit bietet, die Reihenfolge der Seitenelemente festzulegen und damit die inhaltliche Hierarchie zu bestimmen. Die Software "übersetzt" diese Hierarchie dann automatisch in semantischen Code.

1.3.4 Bildschirmausrichtung

Dieser Erfolgskriterium der Richtlinie 1.3 fordert, dass Inhalte unabhängig von der Bildschirmausrichtung nutzbar sein müssen.

WebSite X5 erfüllt dieses Kriterium automatisch, da es keine Einschränkungen für die vertikale oder horizontale Darstellung von Inhalten vorschreibt.

2.1.1 Tastatur

Die Richtlinie 2.1 verlangt, dass alle Funktionen auch über die Tastatur verfügbar sind, und das Erfolgskriterium 2.1.1 legt fest, dass die Nutzung per Tastatur ohne zeitliche Begrenzungen für einzelne Tastenanschläge möglich sein muss.

#Tipp - Weitere Informationen zur Tastaturnavigation finden Sie unter Wie kann eine zugängliche Tastaturnavigation gewährleistet werden?

WebSite X5 erfüllt dieses Kriterium automatisch, indem es semantische Elemente (<a>, <button>, <input>, <dialog>) verwendet, um die Navigation per Tastatur zu ermöglichen. Zusätzlich fügt WebSite X5 das HTML-Attribut tabindex hinzu und implementiert die Tastatursteuerung für UI-Komponenten, für die es kein entsprechendes HTML-Element gibt (z. B. für den Preisselektor in der Produktsuche oder für die Registerkartenansicht in den Text- und Tabellenobjekten).

#Tipp - Derzeit können beim Bild-Objekt die Zoom- und Verschiebungsfunktionen noch nicht per Tastatur gesteuert werden. 

2.1.2 Keine Tastaturfalle

Dieses Erfolgskriterium der Richtlinie 2.1 besagt, dass es immer möglich sein muss, den Fokus von einem ausgewählten Element zu entfernen, sodass Benutzer, die mit der Tastatur navigieren, nicht in Unterbereichen einer Seite „gefangen“ bleiben.

WebSite X5 erfüllt dieses Kriterium automatisch, indem es das HTML-Attribut tabindex verwendet und die Tastatursteuerung implementiert, um die Navigation durch alle Seitenelemente zu ermöglichen (der Fokus kann mit der Tab-Taste in jedes Element gelangen und wieder verlassen werden).

2.1.4 Tastenkombinationen

Dieses Erfolgskriterium der Richtlinie 2.1 verlangt, dass, falls Tastenkombinationen definiert werden, diese deaktiviert, neu zugewiesen oder nur dann aktiviert werden können, wenn der Fokus auf einer bestimmten Komponente liegt.

Da WebSite X5 keine Tastenkombinationen definiert, wird dieses Kriterium automatisch erfüllt.

2.4.1 Überspringen von Blöcken

Richtlinie 2.4 fordert, dass unterstützende Funktionen bereitgestellt werden, um die Navigation zu erleichtern, Inhalte zu finden und die aktuelle Position auf der Website zu bestimmen.

Insbesondere spezifiziert Erfolgskriterium 2.4.1, dass eine Möglichkeit bereitgestellt werden muss, um sich wiederholende Inhaltsblöcke auf mehreren Webseiten zu überspringen.

WebSite X5 erfüllt dieses Erfolgskriterium automatisch, indem versteckte Links eingefügt werden, die es ermöglichen, wiederholte Abschnitte der Seite zu überspringen und so schneller auf die Hauptinhalte zuzugreifen. Konkret werden folgende Links eingefügt:

• Ein Link am Anfang der Seite, um direkt zum Hauptinhalt zu springen.
• Ein Link am Anfang der Menüs, um zum ersten Inhalt nach dem Menü zu springen.
• Ein Link am Anfang des Suchpanels im Produktkatalog, um zur Produktliste zu springen.
• Ein Link am Anfang jedes Blog-Seitenbereichs, um zum nächsten Abschnitt zu springen.
• Ein Link am unteren Ende der Seite, um zum Hauptinhalt zurückzukehren.

2.4.2 Seitentitel

Im Rahmen der Richtlinie 2.4 verlangt das Erfolgscriterion 2.4.2, dass Webseiten Titel haben, die ihr Thema und ihren Zweck beschreiben.

WebSite X5 erfüllt dieses Kriterium im unterstützten Modus: Es fordert den Autor auf, den Titel jeder Seite anzugeben, und fügt den eingegebenen Text mithilfe des <title>-Tags in den <head>-Bereich der generierten HTML-Seite ein.

#Tipp - Das <title>-Tag wird von WebSite X5 automatisch generiert, indem der Seitenname (festgelegt in Schritt 3 während der Erstellung der Sitemap) und der „Seitentitel“ (festgelegt über das Fenster „Seiteneigenschaften“) verwendet werden. Wenn Sie das <title>-Tag anpassen möchten, gehen Sie zu „Schritt 3 - Sitemap“, wählen Sie die Seite aus, die Sie bearbeiten möchten, und klicken Sie auf die Schaltfläche „Eigenschaften“. Aktivieren Sie im Tab „SEO“ die Option „Tag Title“ und geben Sie den gewünschten Titel in das entsprechende Feld ein.  

2.4.3 Fokus-Reihenfolge

Im Rahmen der Richtlinie 2.4 besagt das Erfolgscriterion 2.4.3, dass, wenn eine Webseite sequentiell navigiert werden kann und die Navigationsreihenfolge deren Bedeutung oder Funktion beeinflusst, die interaktiven Elemente den Fokus in einer Reihenfolge erhalten müssen, die deren Sinn und Funktionsfähigkeit erhält.

Um dieses Kriterium automatisch zu erfüllen, generiert WebSite X5 den Seiten-Code so, dass:

• die HTML-Elemente im Code der Seite in der gleichen Reihenfolge erscheinen, in der sie auf dem Bildschirm angezeigt werden. Dadurch erhalten die Komponenten beim Navigieren mit der Tastatur den Fokus in der richtigen Reihenfolge.
• der Code für dynamische Elemente (z. B. Pop-ups, Dialogfenster, Werbebanner usw.) in der Nähe des zugehörigen Inhalts eingefügt wird, wobei das HTML-Element <dialog> verwendet wird, um:
• den automatischen Fokus auf den neu hinzugefügten Inhalt zu setzen;
• den Fokus innerhalb dieses Inhalts zu halten, falls dieser „modale“ Eigenschaften besitzt;
• die vorherige Fokusposition nach dem Schließen des Inhalts wiederherzustellen.
• der Fokus automatisch auf das Texteingabefeld in der Produktkatalogsuche und auf der Website-Suchseite gesetzt wird, dank des HTML-Attributs autofocus.

2.4.4 Zweck des Links (im Kontext)

Im Rahmen der Richtlinie 2.4 besagt Erfolgskriterium 2.4.4, dass der Zweck jedes Links entweder aus dem Linktext allein oder aus dem Linktext in Verbindung mit programmatisch bestimmbaren Kontextinformationen ersichtlich sein muss.

Das Ziel dieses Kriteriums ist es, sicherzustellen, dass Benutzer leicht verstehen können, welchen Zweck ein Link hat, um zu entscheiden, ob sie ihm folgen möchten oder nicht. Idealerweise sollte der Linktext selbst ausreichen, um seine Funktion zu verdeutlichen. Es ist jedoch auch akzeptabel, wenn der Zweck des Links durch den Kontext, in den er eingebettet ist, klargestellt wird, vorausgesetzt, dass er korrekt mit geeigneten ARIA-Techniken verknüpft ist.

WebSite X5 erfüllt die Anforderungen des Kriteriums 2.4.4 automatisch in allen Fällen, in denen es einen Link selbst generiert. Für Links, die vom Benutzer eingefügt werden, bietet es die Möglichkeit, einen alternativen Beschreibungstext anzugeben.

3.1.1 Seitensprache

Die Richtlinie 3.1 fordert, dass Texte lesbar und verständlich gestaltet werden. Im Rahmen dieser Richtlinie verlangt das Erfolgskriterium 3.1.1, dass die Standardsprache jeder Webseite programmgesteuert festgelegt wird.

WebSite X5 erfüllt dieses Kriterium automatisch, indem es das HTML-Attribut lang im <html>-Tag verwendet, um die Sprache des Seiteninhalts anzugeben.

#Tipp - Sie können die 'Inhaltssprache' über die entsprechende Option im Fenster 'Schritt 1 - Einstellungen > Allgemeine Informationen' festlegen.

3.2.1 Beim Fokus

Richtlinie 3.2 fordert, dass Webseiten in einer vorhersehbaren Weise angezeigt und bedient werden können.

Speziell besagt Erfolgskriterium 3.2.1, dass sich der Kontext nicht automatisch ändern darf, wenn ein Element auf einer Webseite den Fokus erhält. Eine signifikante Veränderung könnte die Benutzer desorientieren.

WebSite X5 erfüllt dieses Kriterium automatisch, da es, wie gefordert, keine Kontextänderungen vornimmt, wenn ein Element den Fokus erhält.

3.3.1 Fehlererkennung

Die Richtlinie 3.3 fordert, dass Benutzer bei der Vermeidung von Fehlern unterstützt und bei deren Korrektur erleichtert werden.

Insbesondere besagt die Erfolgsbedingung 3.3.1, dass, wenn ein Fehler bei der Dateneingabe automatisch erkannt wird (z. B. beim Ausfüllen eines Formulars), eine Textmeldung bereitgestellt werden muss, die den Fehler beschreibt. Diese Meldung sollte so spezifisch wie möglich sein, damit Benutzer verstehen können, was falsch gelaufen ist.

WebSite X5 erfüllt dieses Kriterium automatisch, indem es semantisch korrekten Code für E-Mail-Formulare generiert. Insbesondere wird das HTML-Attribut aria-invalid in Formularfeldern verwendet, die Validierungsfehler enthalten (fehlende oder ungültige Daten), und HTML-Elemente <dialog> mit role=alertdialog werden eingesetzt, um dem Benutzer etwaige Eingabefehler mitzuteilen.

3.3.2 Beschriftungen oder Anweisungen

Ebenfalls in Bezug auf Richtlinie 3.3 fordert die Erfolgsbedingung 3.3.2, dass, wenn Inhalte Benutzereingaben erfordern, Beschriftungen oder Anweisungen bereitgestellt werden müssen, die verdeutlichen, welche Daten erwartet werden.

WebSite X5 erfüllt diese Bedingung im assistierten Modus durch die Generierung von semantisch korrektem Code. Konkret:

• Verwendet die HTML-Elemente <label> und/oder die HTML-Attribute aria-label, aria-labelledby und aria-describedby, um Anweisungen zur Eingabe in Formulare bereitzustellen (Suchfelder auf der Website und im Produktkatalog, Login- und Registrierungsseiten, Kontaktformular-Objekte).
• Verwendet das HTML-Attribut aria-required für alle Pflichtfelder.

Darüber hinaus generiert WebSite X5 automatisch Beschreibungen für alle von der Software erstellten Formularfelder (z. B.

Suchfelder auf der Website und im Produktkatalog, Login- und Registrierungsseiten), während es dem Autor der Website ermöglicht, individuelle Beschreibungen für alle selbst erstellten Felder im Kontaktformular-Objekt anzugeben.

4.1.1 Syntaxanalyse (Parsing)

Die Richtlinie 4.1 besagt, dass eine maximale Kompatibilität mit aktuellen und zukünftigen Benutzerprogrammen, einschließlich unterstützender Technologien, gewährleistet sein muss.

Insbesondere verlangt das Erfolgskriterium 4.1.1, dass bei Inhalten, die mit Markup-Sprachen erstellt wurden, Elemente vollständige Start- und End-Tags haben, gemäß ihren Spezifikationen verschachtelt sind, keine doppelten Attribute enthalten und eindeutige IDs besitzen, es sei denn, Ausnahmen sind durch die Spezifikationen erlaubt.

WebSite X5 erfüllt dieses Erfolgskriterium automatisch, da es syntaktisch korrekten HTML-Code generiert und dabei alle aufgeführten Anforderungen berücksichtigt.

4.1.2 Name, Rolle, Wert

Ebenfalls im Rahmen der Richtlinie 4.1 verlangt das Erfolgskriterium 4.1.2, dass für alle Benutzeroberflächenkomponenten (einschließlich, aber nicht beschränkt auf: Formularelemente, Links und skriptgenerierte Komponenten):

• Name und Rolle programmatisch bestimmt werden können; 
• Zustände, Eigenschaften und Werte, die vom Benutzer festgelegt werden können, auch programmatisch festgelegt werden können; 
• Statusänderungen dieser Elemente für Benutzerprogramme, einschließlich assistiver Technologien, verfügbar gemacht werden.

Das Ziel dieses Erfolgskriteriums ist es, sicherzustellen, dass assistive Technologien (AT) korrekt mit den Steuerungselementen der Benutzeroberfläche interagieren können. Bei der Verwendung standardisierter Steuerelemente ist dieser Prozess unkompliziert. Wenn jedoch benutzerdefinierte Steuerelemente erstellt oder Benutzeroberflächenelemente für eine andere Funktion als die übliche programmiert werden, sind zusätzliche Maßnahmen erforderlich. 

Um dieses Kriterium zu erfüllen, generiert WebSite X5 automatisch semantischen Code für Benutzeroberflächenkomponenten. Beispielsweise:

• Verwendung semantischer HTML-Elemente wie <a>, <button>, <input>, <dialog>, <nav>, <article> und/oder des HTML-Attributs role, ergänzt durch die HTML-Attribute aria-label, aria-labelledby und/oder aria-describedby, um den Namen und die Rolle jeder Komponente der Seite zu definieren.
• Einfügen der HTML-Attribute aria-selected und aria-expanded, um den Status der Benutzeroberflächenkomponenten (ausgewählt/nicht ausgewählt, erweitert/eingeklappt) anzuzeigen.
• Einfügen der HTML-Attribute aria-controls und aria-owns, um Interaktionen zwischen Komponenten zu definieren.
• Verwendung des HTML-Attributs aria-live, um Benutzern dynamische Inhaltsänderungen in bestimmten Bereichen der Seite mitzuteilen.