Sie sehen sich Hilfeinhalte der folgenden Version an:

WCAG 2.0 umfasst eine Reihe von technologieunabhängigen Richtlinien und Erfolgskriterien, die Sie bei der Erstellung von Webinhalten, die für Personen mit Behinderungen barrierefrei zugänglich sind, unterstützen.

Diese sind in drei Konformitätslevel abgestuft: Level A (niedrigstes), Level AA und Level AAA (höchstes). Die Levels sind kurz definiert wie folgt:

  • Level A: Ihre Site erreicht ein allgemeines Mindestmaß an Barrierefreiheit. Zur Erreichung dieses Levels müssen alle Erfolgskriterien von Level A erfüllt sein.
  • Level AA: Dies ist ein ideales Level der Barrierefreiheit, das Sie anstreben sollten. Auf diesem Level erreicht Ihre Site ein höheres Maß an Barrierefreiheit, da sie von den meisten Menschen in den meisten Situationen mit den meisten Technologien barrierefrei zugänglich ist. Um dieses Level zu erreichen müssen alle Erfolgskriterien von Level A und Level AA erfüllt sein.
  • Level AAA: Ihre Site erreicht ein sehr hohes Maß an Barrierefreiheit. Zur Erreichung dieses Levels müssen alle Erfolgskriterien von Level A, Level AA und Level AAA erfüllt sein.

Bei der Erstellung Ihrer Site sollten Sie das Gesamtlevel festlegen, dem Ihre Site entsprechen sollte.

Im folgenden Abschnitt finden Sie die WCAG 2.0-Richtlinien mit den entsprechenden Erfolgskriterien für die Konformitätslevels Level A und Level AA.

Hinweis:

Da bestimmte Inhalte die Erfolgskriterien von Level AAA unmöglich erreichen können, ist es nicht empfehlenswert, dieses Konformitätslevel als allgemeine Richtlinie festzulegen.

Hinweis:

In diesem Dokument verwenden wir Folgendes:

Grundsatz 1: Erkennbar

Textalternativen (1.1)

Nichttextlicher Inhalt (1.1.1)

  • Erfolgskriterium 1.1.1
  • Level A
  • Nichttextlicher Inhalt: Alle nichttextlichen Inhalte, die Benutzern präsentiert werden, haben eine Textalternative, die dem jeweiligen Zweck entspricht, ausgenommen die unten aufgeführten Situationen.

Zweck: Nichttextlicher Inhalt (1.1.1)

Informationen auf einer Webseite können in vielen verschiedenen nichttextlichen Formaten dargestellt werden, wie zum Beispiel als Bilder, Videos, Animationen und Diagramme. Menschen, die blind sind oder deren Sicht erheblich eingeschränkt ist, können nichttextliche Inhalte nicht sehen, doch sie können Textinhalte erfassen, wenn sie ihnen von einem Bildschirmleser vorgelesen oder in haptischer Form auf einem Braille-Anzeigegerät präsentiert werden. Somit kann es durch Bereitstellung von Textalternativen zu Inhalten in grafischem Format ermöglicht werden, dass Menschen, die die grafischen Inhalte nicht sehen können, auf eine gleichwertige Version der Informationen des Inhalts zugreifen können.

Ein nützlicher weiterer Vorteil besteht darin, dass es durch Textalternativen möglich ist, nichttextliche Inhalte durch die Suchmaschinentechnologie zu indizieren.

Erfüllen: Nichttextlicher Inhalt (1.1.1)

Bei statischen Grafiken besteht die Grundanforderung darin, eine gleichwertige Textalternative für die Grafik bereitzustellen. Dies kann im Feld ALT-Text durchgeführt werden:

Hinweis:

Einige integrierte Komponenten wie Karussell und Dia-Show bieten keine Möglichkeit zum Hinzufügen von alternativen Textbeschreibungen zu Bildern. Wenn Sie Versionen davon für Ihre AEM-Instanz implementieren, muss Ihr Entwicklerteam diese Komponenten so konfigurieren, dass das alt-Attribut unterstützt wird, damit Autoren es dem Inhalt hinzufügen können (siehe Hinzufügen von Support für weitere HTML-Elemente und Attribute).

Das Feld ALT-Text ist im Komponentendialogfeld Bild auf der Registerkarte Erweitert verfügbar:

Das Dialogfeld „Bearbeiten“ der Komponente „Bild“ in der klassischen Benutzeroberfläche zeigt das Feld „ALT-Text“.

AEM fügt Ihren Bildern standardmäßig einen ALT-Text hinzu. Bei der klassischen Benutzeroberfläche gibt es zwei verschiedene Szenarien zur Methode der Erstellung des Standardattributs (obwohl der Standardwert als Alternative möglicherweise nicht ausreicht und höchstwahrscheinlich auf der Registerkarte Erweitert für die Bildeigenschaften bearbeitet werden muss):

  • Datei:
    Ein Bild, das von der Festplatte des Benutzers hochgeladen wurde. Wenn Sie einer Seite eine Bildkomponente hinzufügen und dann ein Bild von Ihrer Festplatte oder einer anderen Quelle wählen, lautet der Standardwert für ALT-TextDatei. Dies muss auf der Registerkarte Erweitert für die Bildeigenschaften geändert werden. Dieser Wert wird wiederum nicht im Feld ALT-Text angezeigt, doch wenn der Wert geändert wird, ist der neue Wert im Feld zu sehen.
  • Asset:
    Ein Bild wird vom digitalen Asset-Repository hinzugefügt. Wenn Sie ein Bild vom digitalen Asset-Repository zu einer Webseite ziehen, dann werden die Werte Titel und ALT-Text für dieses Bild den Metadaten für dieses Bild entnommen.

Hinweis:

In beiden oben genannten Szenarien ist der Wert ALT-Text nicht auf der Registerkarte Erweitert für Bildeigenschaften sichtbar. Geben Sie zur Änderung des Standardwerts im Feld ALT-Text einfach einen neuen Wert ein.

Hinweis:

Wenn Ihr Bild nur Dekorationszwecken dient (siehe Erstellen guter Textalternativen), dann können Sie im Feld ALT-Text durch Drücken der Leertaste ein Leerzeichen einfügen. Dadurch wird ein leeres ALT -Attribut erstellt, wodurch ein Bildschirmleser das Bild ignoriert.

Erstellen guter Textalternativen

Es gibt verschiedene Arten von nichttextlichem Inhalt. Daher hängt der Wert der Textalternative von der Rolle ab, die die Grafik auf der Webseite spielt. Nachfolgend sehen Sie einige Faustregeln:

  • Textalternativen sollten kurz und bündig sein, aber dennoch klar die wesentlichen Informationen erfassen, die der nichttextliche Inhalt vermittelt.
  • Übermäßig lange Beschreibungen (mit mehr als 100 Zeichen) sollten vermieden werden. Wenn für eine Textalternative mehr Details erforderlich sind:
    • Geben Sie im Alternativtext eine kurze Beschreibung ab
    • und fügen Sie irgendwo anders auf der entsprechenden Seite oder auf einer anderen Webseite eine längere Beschreibung ein. Verlinken Sie auf diese separate Beschreibung, indem Sie das Bild mit einem Link unterlegen oder indem Sie neben das Bild einen Textlink platzieren.
  • Alternativtext sollte keinen Inhalt replizieren, der bereits in Textform auf derselben Seite vorhanden ist. Denken Sie daran, dass viele Bilder Darstellungen von Punkten sind, die bereits der Text einer Seite abdeckt. Somit ist möglicherweise bereits eine Textalternative vorhanden.
  • Wenn es sich bei dem nichttextlichen Inhalt um einen Link zu einer anderen Seite oder einem anderen Dokument handelt und kein anderer Text vorhanden ist, der Teil desselben Links ist, dann muss der Alternativtext für das Bild das Ziel des Links angeben und braucht das Bild nicht zu beschreiben.
  • Wenn sich der nichttextliche Inhalt in einem Schaltflächenelement befindet und kein Text vorhanden ist, der Teil derselben Schaltfläche ist, dann muss der Alternativtext des Bildes die Funktion der Schaltfläche angeben statt das Bild zu beschreiben.
  • Es ist völlig in Ordnung, wenn für ein Bild ein leerer Alternativtext (null) angegeben wird, allerdings nur dann, wenn das Bild keinen Alternativtext hat (wenn es sich beispielsweise nur um eine dekorative Grafik handelt) oder wenn der entsprechende Text bereits im Seitentext vorhanden ist.

Der W3C-Entwurf: HTML5-Techniken zur Bereitstellung nützlicher Textalternativen bietet mehr Details und Beispiele für die Bereitstellung von angemessenem Alternativtext für unterschiedliche Arten von Bildern.

Bestimmte Arten von nichttextlichem Inhalt, für den Textalternativen erforderlich sind:

  • Veranschaulichende Fotos:
    Hierbei handelt es sich um Bilder von Menschen, Objekten oder Orten. Denken Sie an die Rolle des Fotos auf der Seite. Eine angemessene Textentsprechung lautet dann wahrscheinlich Foto von [Objekt], kann jedoch vom Text neben dem Bild abhängen.

  • Symbole:
    Hierbei handelt es sich um kleine Piktogramme (Grafiken), die bestimmte Informationen vermitteln. Sie müssen durchgängig auf einer Seite und Site verwendet werden. Alle Instanzen des Symbols auf einer Seite oder Site sollten dieselbe kurze und knappe Textalternative haben, es sei denn, dass dadurch eine unnötige Verdoppelung von bereits vorhandenem Text erzeugt würde.

  • Diagramme:
    Normalerweise werden dadurch numerische Daten dargestellt. So könnte als eine Möglichkeit zur Bereitstellung von Alternativtext eine kurze Zusammenfassung der im Diagramm gezeigten Haupttrends eingefügt werden. Fall nötig, können Sie eine detailliertere Beschreibung im Text im Feld Beschreibung auf der Registerkarte Erweiterte Bildeigenschaften einfügen. Außerdem könnten Sie die Quelldaten an anderer Stelle auf der Seite oder Site als Tabelle zur Verfügung stellen.

    Beispiel eines Diagramms: Nachfolgend sehen Sie einen bewährten Ansatz zur Bereitstellung einer Alternative.

    Zur Bereitstellung einer Alternative für dieses Beispieldiagramm können Sie dem Bild selbst einen knappen ALT -Text hinzufügen und dann dem Bild eine vollständige Textalternative folgen lassen.

    <p><img src="figure1.gif" alt="Figure 1" ></p>
    <p> Figure 1. Distribution of Articles by Journal Category.
    Pie chart: Language=68%, Education=14% and Science=18%.</p>

    Hinweis:

    Der obige Ausschnitt dient nur zur Veranschaulichung der Reihenfolge. Es wird empfohlen, die Komponente Bild (statt des oben verwendeten img src -Verweises) zu verwenden.

    In AEM können Sie dies anhand einer Kombination der Felder ALT-Text und Beschreibung im Konfigurationsdialogfeld des Bildes erreichen, wie in Erfüllen: Nichttextlicher Inhalt (1.1.1).

  • Karten, Funktionspläne, Flussdiagramme:
    Für Grafiken mit räumlichen Daten (wie zum Beispiel zur Unterstützung der Beschreibung von Beziehungen zwischen Objekten oder eines Prozesses) müssen Sie sicherstellen, dass die Hauptaussage im Textformat angegeben wird. Bei Karten ist die Angabe einer vollständigen Textentsprechung wahrscheinlich unpraktisch, doch wenn die Karte als Wegweiser zu einem bestimmten Standort dient, dann kann der Alternativtext für das Kartenbild kurz Karte von Xlauten, gefolgt von einer Wegbeschreibung zu diesem Standort in Textform an einer anderen Stelle auf der Seite oder über das Feld Beschreibung auf der Registerkarte Erweitert der Komponente Bild.

  • CAPTCHAs:
    Ein CAPTCHA ist ein vollautomatischer öffentlicher Turing-Test zur Unterscheidung von Computern und Menschen. Es handelt sich um eine Sicherheitsprüfung auf Webseiten, um Menschen von schädlicher Software zu unterscheiden, die allerdings die Barrierefreiheit einschränken kann. Sie bestehen aus Bildern, bei denen Benutzer beschreiben sollen, was sie sehen, um einen Sicherheitstest zu bestehen. Die Bereitstellung einer Textalternative für das Bild ist offensichtlich nicht möglich, daher müssen Sie stattdessen alternative nichtgrafische Lösungen in Betracht ziehen.
    Das W3C bietet eine Reihe von Vorschlägen wie: Diese Ansätze haben jedoch sowohl Vor- als auch Nachteile.

    • Logik-Puzzles
    • Audio statt Bilder
    • Eingeschränkte Benutzerkonten und Spamfilter
  • Hintergrundbilder:
    Diese werden anhand von Cascading Style Sheets (CSS) statt HTML erstellt. Dies bedeutet, dass es nicht möglich ist, einen Wert für Alternativtext anzugeben. Daher sollten Hintergrundbilder keine wichtigen textlichen Informationen geben. Falls sie es doch tun, müssen diese Informationen auch im Text der Seite vorhanden sein.
    Es ist jedoch wichtig, dass ein alternativer Hintergrund angezeigt wird, wenn das Bild nicht angezeigt werden kann.

    Hinweis:

    Es sollte ein Mindestmaß an Kontrast zwischen dem Hintergrund- und dem Vordergrundtext vorhanden sein; weitere Details hierzu finden Sie unter Kontrast (Minimum) (1.4.3).

Weitere Informationen: Nichttextlicher Inhalt (1.1.1)

Zeitbasierte Medien (1.2)

Diese Richtlinie behandelt Webinhalte, die zeitbasiertsind. Es handelt sich um Inhalte, die der Benutzer abspielen kann (wie Video, Audio und animierte Inhalte) und die entweder vorher aufgezeichnet wurden oder als Live-Stream verfügbar sind.

Nur-Audio und Nur-Video (aufgezeichnet) (1.2.1)

  • Erfolgskriterium 1.2.1
  • Level A
  • Nur-Audio und Nur-Video (aufgezeichnet): Für aufgezeichnete Nur-Audio und Nur-Video-Medien gilt Folgendes, außer wenn das Audio oder Video eine Medienalternative für Text und als solche ausdrücklich gekennzeichnet ist:
    • Aufgezeichnetes Nur-Audio: Eine Alternative für zeitbasierte Medien wird bereitgestellt, die gleichwertige Informationen für aufgezeichnete Nur-Audio-Inhalte darstellt.
    • Aufgezeichnetes Nur-Video: Es wird entweder eine Alternative für zeitbasierte Medien oder ein Audio-Track bereitgestellt, die/der gleichwertige Informationen für aufgezeichnete Nur-Video-Inhalte darstellt.

Zweck: Nur-Audio und Nur-Video (aufgezeichnet) (1.2.1)

Für folgende Personen kann der barrierefreie Zugang für Video und Audio eingeschränkt sein:

  • Personen mit eingeschränktem Sehvermögen, wenn es keinen Soundtrack gibt oder wenn der Soundtrack nicht ausreicht, um sie über die Vorgänge im Video oder in der Animation zu informieren;
  • Personen mit eingeschränktem Hörvermögen oder gehörlose Personen, die den Soundtrack nicht hören können.
  • Personen, die den Soundtrack zwar hören können, doch den gesprochenen Inhalt nicht verstehen (weil er beispielsweise in einer Sprache aufgezeichnet ist, die sie nicht verstehen).

Video oder Audio kann auch für Personen unzugänglich sein, die Browser oder Geräte verwenden, die die Wiedergabe von Inhalt in bestimmten Medienformaten wie zum Beispiel Adobe Flash nicht unterstützen.

Wenn diese Informationen in einem anderen Format bereitgestellt werden, wie zum Beispiel als Text (oder Audio für Video ohne Audio), können die Informationen für die Personen barrierefrei zugänglich sein, die nicht auf den ursprünglichen Inhalt zugreifen können

Erfüllen: Nur-Audio und Nur-Video (aufgezeichnet) (1.2.1)

  • Wenn es sich bei dem Inhalt um aufgezeichnetes Audio ohne Video (wie zum Beispiel Podcast) handelt:
    • Stellen Sie direkt vor oder nach dem Inhalt einen Link zu einem Text-Transkript des Audioinhalts bereit.
      Das Transkript sollte eine HTML-Seite mit einer Textentsprechung aller gesprochenen und wichtigen nicht gesprochenen Inhalte sein und den Sprecher, eine Beschreibung der Szenerie, Gesänge und eine Beschreibung anderer wichtiger Audioinhalte angeben.
  • Wenn es sich bei dem Inhalt um eine Animation oder ein aufgezeichnetes Video ohne Audio handelt:
    • Stellen Sie direkt vor oder nach dem Inhalt einen Link zu einer entsprechenden Textbeschreibung der Informationen im Video bereit.
    • Es kann auch eine entsprechende Audiobeschreibung in einem häufig verwendeten Audioformat wie MP3 sein.

Hinweis:

Wenn der Audio- oder Videoinhalt als Alternative zu Inhalten bereitgestellt wird, die bereits in einem anderen Format auf einer Webseite vorhanden sind, müssen die oben genannten Anforderungen nicht erfüllt werden. Wenn beispielsweise ein Video eine Liste von Textanweisungen veranschaulicht, dann ist für dieses Video kein Alternativtext erforderlich, weil die Textanweisungen bereits als Alternative für das Video dienen.

Das Einfügen von Multimedia wie Flash-Inhalten auf Ihren AEM-Webseiten entspricht in etwa dem Einfügen eines Bildes. Da Multimedia jedoch weit mehr ist als ein Standbild, gibt es eine Vielzahl von verschiedenen Einstellungen und Optionen zur Steuerung wie die Multimedia-Inhalte abgespielt werden.

Hinweis:

Wenn Sie Multimedia mit informativem Inhalt verwenden, müssen Sie auch Links zu Alternativen erstellen. Beispielsweise müssen Sie zum Hinzufügen eines Text-Transkripts eine HTML-Seite für die Anzeige des Transkripts erstellen und dann einen Link neben dem Audioinhalt oder unterhalb davon hinzufügen.

Weitere Informationen: Nur-Audio und Nur-Video (aufgezeichnet) (1.2.1)

Untertitel (aufgezeichnet) (1.2.2)

  • Erfolgskriterium 1.2.2
  • Level A
  • Untertitel (aufgezeichnet): Untertitel werden für alle aufgezeichneten Audioinhalte in synchronisierten Medien bereitgestellt, außer wenn das Medium eine Medienalternative für Text und als solche ausdrücklich gekennzeichnet ist.

Zweck: Untertitel (aufgezeichnet) (1.2.2)

Gehörlose oder schwerhörige Menschen können Audioinhalte gar nicht oder nur schwer verstehen. Untertitel sind Textentsprechungen für gesprochene und nicht gesprochene Audioinhalte; sie werden im Video zum richtigen Zeitpunkt auf dem Bildschirm angezeigt. Sie ermöglichen es Menschen, die das Audio nicht hören können, zu verstehen, was vor sich geht.

Hinweis:

Untertitel sind nicht erforderlich, wenn passender Text oder nichttextliche Entsprechungen (die direkt entsprechende Informationen vermitteln) auf derselben Seite wie das Video oder die Animation verfügbar sind.

Erfüllen: Untertitel (aufgezeichnet) (1.2.2)

Es gibt zwei Arten von Untertiteln:

  • Offen: Immer sichtbar, wenn das Video abgespielt wird
  • Geschlossen: Benutzer können die Untertitel ein- oder ausschalten

Verwenden Sie möglichst geschlossene Untertitel, da Benutzer so wählen können, ob die Untertitel angezeigt werden.

Für geschlossene Untertitel müssen Sie eine synchronisierte Untertiteldatei in einem entsprechenden Format (wie SMIL) erstellen und zusammen mit der Videodatei bereitstellen (Details dazu, wie dieser Vorgang ausgeführt wird, sind im Rahmen dieses Leitfadens nicht möglich, doch wir haben Ihnen Links zu einigen Lernprogrammen unter Weitere Informationen: Untertitel (aufgezeichnet) (1.2.2)zusammengestellt). Geben Sie Benutzern auf jeden Fall einen Hinweis, dass Untertitel für das Video verfügbar sind.

Wenn Sie offene Untertitel verwenden müssen, betten Sie den Text im Videotrack ein. Dies erreichen Sie mithilfe von Anwendungen zur Videobearbeitung, die die Überlagerung von Untertiteln im Video ermöglichen.

Weitere Informationen: Untertitel (aufgezeichnet) (1.2.2)

Audiobeschreibung oder Medienalternative (aufgezeichnet) (1.2.3)

  • Erfolgskriterium 1.2.3
  • Level A
  • Audiobeschreibung oder Medienalternative (aufgezeichnet): Eine Alternative für zeitbasierte Medien oder eine Audiobeschreibung des aufgezeichneten Videoinhalts wird für synchronisierte Medien bereitgestellt, außer wenn das Medium eine Medienalternative für Text und als solche ausdrücklich gekennzeichnet ist.

Zweck: Audiobeschreibung oder Medienalternative (aufgezeichnet) (1.2.3)

Blinde Menschen oder Menschen mit eingeschränktem Sehvermögen haben keinen Zugang zu Informationen in einem Video oder einer Animation, wenn diese nur visuell vermittelt werden oder wenn der Soundtrack nicht genügend Informationen bietet, damit sie verstehen können, was visuell gezeigt wird.

Erfüllen: Audiobeschreibung oder Medienalternative (aufgezeichnet) (1.2.3)

Es gibt zwei Ansätze zur Erfüllung dieses Erfolgskriteriums. Beide sind akzeptabel:

  1. Hinzufügen einer weiteren Audiobeschreibung für den Videoinhalt. Hierzu gibt es drei verschiedene Möglichkeiten:

    • Fügen Sie in Pausen im vorhandenen Dialog Informationen zu den Änderungen der Szene ein, die nicht als Teil des vorhandenen Audiotracks präsentiert werden:
    • Stellen Sie einen neuen, zusätzlichen und optionalen Audiotrack bereit, der den ursprünglichen Soundtrack und zudem weitere Audioinformationen zu den Änderungen in der Szene enthält.
      • Dadurch können Benutzer zwischen dem vorhandenen Audiotrack (der keine Audiobeschreibung enthält) und dem neuen Audiotrack ( mit einer Audiobeschreibung) wechseln.
      • Dadurch wird verhindert, dass Benutzer, die die zusätzliche Beschreibung nicht benötigen, gestört werden.
    • Erstellen Sie eine zweite Version des Videoinhalts, um erweiterte Audiobeschreibungen zu ermöglichen. Dies verringert die Schwierigkeiten, die sich durch Einfügen von detaillierten Audiobeschreibungen in Lücken zwischen dem vorhandenen Dialog ergeben, weil das Audio und Video an passenden Stellen unterbrochen werden muss. Als Ergebnis kann eine viel längere Audiobeschreibung gegeben werden, bevor die Aktion erneut startet. Wie im vorigen Beispiel wird dies am besten als optionaler eigener Audio-Track bereitgestellt, um eine Störung der Benutzer zu verhindern, die keine zusätzliche Beschreibung benötigen.
  2. Stellen Sie ein Text-Transkript bereit, das eine angemessene Textentsprechung der Audio- und Bildelemente des Videos oder der Animation ist. Es sollte möglichst den Sprecher, eine Beschreibung der Szenerie und den sprachlichen Ausdruck angeben. Abhängig von der Länge können Sie das Transkript auf derselben Seite wie das Video oder die Animation einfügen, oder auch auf einer separaten Seite. In diesem Fall müssen Sie einen Link zu dem Transkript neben dem Video oder der Animation bereitstellen.

Genaue Details zur Erstellung von Audiobeschreibungen für Video würden den Rahmen dieses Leitfadens sprengen. Die Erstellung von Audiobeschreibungen können zeitaufwändig sein, doch andere Adobe-Produkte helfen Ihnen bei diesen Aufgaben. Wenn Sie Inhalte in Adobe Flash Professional erstellen, sollten Sie auch ein Skript erstellen, um den Benutzer aufzufordern, das entsprechende Plug-in herunterzuladen, und Sie sollten eine Textalternative anhand des Elements <noscript> bereitstellen.

Weitere Informationen: Audiobeschreibung oder Medienalternative (aufgezeichnet) (1.2.3)

Untertitel (live) (1.2.4)

  • Erfolgskriterium 1.2.4
  • Level AA
  • Untertitel (Live): Untertitel werden für alle Live-Audioinhalte in synchronisierten Medien bereitgestellt.

Zweck: Untertitel (Live) (1.2.4)

Dieses Erfolgskriterium entspricht dem Erfolgskriterium zu Untertitel (aufgezeichnet) insofern, als es Zugangsbarrieren behandelt, die gehörlose oder schwerhörige Menschen erfahren; der Unterschied besteht darin, dass dieses Erfolgskriterium Live-Präsentationen wie Webcasts behandelt.

Erfüllen: Untertitel (Live) (1.2.4)

Befolgen Sie die Anleitungen, die oben unter Untertitel (aufgezeichnet) genannt wurden. Da die Medien live übermittelt werden, muss die Bereitstellung so schnell wie möglich erfolgen und sofort auf das reagieren, was passiert. Daher sollten Sie Tools für die Echtzeit-Untertitelung oder für Speech-to-Text in Erwägung ziehen.

Detaillierte Anweisungen dazu würden den Rahmen dieses Dokuments sprengen, doch in den folgenden Ressourcen finden Sie nützliche Informationen:

Weitere Informationen: Untertitel (Live) (1.2.4)

Audiobeschreibung (aufgezeichnet) (1.2.5)

  • Erfolgskriterium 1.2.5
  • Level AA
  • Audiobeschreibung (aufgezeichnet): Audiobeschreibungen werden für alle aufgezeichneten Videoinhalte in synchronisierten Medien bereitgestellt.

Zweck: Audiobeschreibung (aufgezeichnet) (1.2.5)

Dieses Erfolgskriterium entspricht dem Erfolgskriterium zu Audiobeschreibung oder Medienalternative (aufgezeichnet), mit dem Unterschied, dass Autoren eine wesentlich detailliertere Audiobeschreibung verfassen müssen, um Level AA zu erfüllen.

Erfüllen: Audiobeschreibung (aufgezeichnet) (1.2.5)

Weitere Informationen: Audiobeschreibung (aufgezeichnet) (1.2.5)

Anpassbar (1.3)

Diese Richtlinie behandelt die Anforderungen zur Unterstützung folgender Personen:

  • Personen, die nicht auf Informationen zugreifen können, die von einem Autor in einem standardmäßigen zweidimensionalen, mehrspaltigen, farbigen Webseiten-Layout präsentiert werden
  • Personen, die eine Nur-Audio-Darstellung oder alternative visuelle Darstellung wie Großdruck oder hohen Kontrast verwenden wollen.

Informationen und Beziehungen (1.3.1)

  • Erfolgskriterium 1.3.1
  • Level A
  • Informationen und Beziehungen: Informationen, Struktur und Beziehungen, die durch die Präsentation vermittelt werden, können programmatisch festgelegt werden oder sind im Text verfügbar.

Zweck: Informationen und Beziehungen (1.3.1)

Viele Hilfstechnologien, die von Menschen mit Behinderungen verwendet werden, verlassen sich auf Strukturinformationen zur effektiven Anzeige oder Ausgabe von Inhalten. Diese Strukturinformationen können in Form von Seitenüberschriften, Tabellenzeilen und Spaltenüberschriften sowie Listentypen vorliegen. Beispielsweise könnte ein Benutzer mit einem Bildschirmleser von Überschrift zu Überschrift durch eine Seite navigieren. Wenn Seiteninhalte jedoch nur über visuelles Styling statt das zugrundeliegende HTML strukturiert wurden, stehen den Hilfstechnologien keine Strukturinformationen zur Verfügung und deren Fähigkeit zur Unterstützung eines leichteren Browsings ist erheblich eingeschränkt.

Dieses Erfolgskriterium besteht, um sicherzustellen, dass derartige Strukturinformationen über HTML bereitgestellt werden, damit die Browser und Hilfstechnologien auf die Informationen zugreifen und davon profitieren können.

Erfüllen: Informationen und Beziehungen (1.3.1)

AEM erleichtert den Aufbau von Webseiten mit den entsprechenden HTML-Elementen. Öffnen Sie Ihren Seiteninhalt im RTE (eine Text-Komponente), und geben Sie im Menü Format das entsprechende Strukturelement (zum Beispiel Absatz, Überschrift etc.) an.

Das folgende Bild zeigt einen Text, der als Absatztext gestylt wurde. Der verwendete Quellcode zeigt die korrekten Anfangs- und End-Tags <p> und </p>.

Ein Beispiel des Absatz-Elements im Modus zur Bearbeitung des Quellcodes (klassische Benutzeroberfläche).

Sie können folgendermaßen sicherstellen, dass Ihre Webseiten die entsprechende Struktur erhalten:

  • Verwendung von Überschriften:

    Sofern Sie die Funktionen für Barrierefreiheit des RTE aktiviert haben (siehe AEM und Barrierefreiheit), bietet AEM drei Ebenen für Seitenüberschriften. Sie können diese verwenden, um Abschnitte und Unterabschnitte im Inhalt zu kennzeichnen. Überschrift 1 ist die oberste Ebene der Überschrift und Überschrift 3 die unterste. Der Systemadministrator kann das System so konfigurieren, dass die Verwendung von weiteren Überschriftenebenen zulässig ist.

    Im folgenden Bild ist ein Beispiel der verschiedenen Überschriftentypen zu sehen.

    Überschrift H1 bis H3 in der Dropdown-Auswahl (klassische Benutzeroberfläche).
  • Hervorgehobener Text:

    Verwenden Sie das Element <strong> oder <em>, um eine Hervorhebung anzugeben. Verwenden Sie keine Überschriften zum Hervorheben von Text in Absätzen.

    • Markieren Sie den Text, den Sie hervorheben möchten.
    • Klicken Sie auf das Symbol B (für <strong>) oder das Symbol I (für <em>), die im Bereich Eigenschaften angezeigt werden (vergewissern Sie sich, dass HTML ausgewählt ist).

    Hinweis:

    RTE ist in einer Standardinstallation von AEM mit den folgenden Symbolen eingerichtet:

    • <b> für <strong>
    • <i> für <em>

    Sie haben die gleiche Wirkung, doch <strong> und <em> sollten bevorzugt werden, weil sie semantisch korrekt für HTML sind. Bei der Entwicklung Ihrer Projektinstanz kann Ihr Entwicklungsteam den RTE zur Verwendung von <strong> und <em> (anstelle von <b> und <i>) konfigurieren.

  • Verwenden Sie Listen: Mit HTML können Sie drei verschiedene Arten von Listen angeben:

    • Das Element <ul> wird für nicht geordnete Listen (Aufzählungslisten) verwendet. Einzelne Listenelemente werden mit dem Element <li> gekennzeichnet.
      Verwenden Sie in RTE das Symbol Aufzählungsliste.
    • Das Element <ol> wird für nummerierte Listen verwendet. Einzelne Listenelemente werden mit dem Element <li> gekennzeichnet.
      Verwenden Sie in RTE das Symbol Nummerierte Liste.

    Wenn Sie einen bestimmten Inhalt in einen bestimmten Listentyp ändern möchten, markieren Sie den entsprechenden Text und wählen Sie den entsprechenden Listentyp aus. Wie in dem obigen Beispiel, in dem gezeigt wird, wie Absatztext eingegeben wird, werden die entsprechenden Listenelemente automatisch zum HTML hinzugefügt, doch Sie können dies in der Ansicht zur Bearbeitung des Quellcodes anzeigen.

    Hinweis:

    <dl> wird vom RTE nicht unterstützt.  

  • Verwenden SIe Tabellen:

    Datentabellen müssen mit HTML-Tabellenelementen gekennzeichnet sein:

    • Ein Element <table>
    • Ein Element <tr> für jede Tabellenzeile
    • Ein Element <th> für jede Zeilen- und Spaltenüberschrift
    • Ein Element <td> für jede Datenzelle

    Hinweis:

    Tabellen sollten mit der Komponente Tabelle umgesetzt werden. Obwohl Tabellen in der Textkomponente erstellt werden können, wird dieses Verfahren nicht empfohlen.

    Außerdem nutzen barrierefrei zugängliche Tabellen die folgenden Elemente und Attribute:

    • Das Element <caption> wird verwendet, um für die Tabelle eine sichtbare Tabellenbeschriftung bereitzustellen. Beschriftungen werden standardmäßig zentriert über der Tabelle angezeigt, können jedoch mit CSS entsprechend positioniert werden. Die Beschriftung ist programmatisch mit der Tabelle verknüpft und ist daher eine nützliche Methode zur Angabe einer Einführung in den Inhalt.
    • Das Element <summary> unterstützt blinde Benutzer, die in einer Tabelle dargestellten Informationen zu verstehen, weil ihnen damit eine Inhaltsangabe dessen, was sehende Benutzer sehen können, geboten wird. Dies ist besonders nützlich bei komplexen oder unkonventionellen Tabellen-Layouts (dieses Attribut wird nicht im Browser angezeigt, sondern nur für Hilfstechnologien ausgelesen).
    • Das Attribut Bereichdes Elements <th> wird verwendet, um anzugeben, ob eine Zelle eine Überschrift für eine bestimmte Zeile oder eine bestimmte Spalte darstellt. Auf ähnliche Weise können die Überschrift und ID-Attribute in komplexen Tabellen verwendet werden, bei denen Datenzellen mit einer oder mehreren Überschriften verknüpft sein können.

    Hinweis:

    Diese Elemente und Attribute sind standardmäßig nicht direkt verfügbar, doch der Systemadministrator kann den Support für diese Werte im Dialogfeld Tabelleneigenschaften (siehe Hinzufügen von Support für zusätzliche HTML-Elemente und -Attribute) hinzufügen.

    Wenn Sie eine Tabelle hinzufügen, können Sie die Tabelleneigenschaften im entsprechenden Dialogfeld konfigurieren.

    • Eine entsprechende Beschriftung.
    • Idealerweise sollten Sie die Standardwerte für Breite, Höhe, Rand, Textabstand und Zellenabstand entfernen. Alle Eigenschaften können in einem globalen Stylesheet festgelegt werden.
    Dialogfeld „Tabelleneigenschaften“

    Anschließend können Sie im Dialogfeld Zelleneigenschaften wählen, ob die Zelle eine Daten- oder Überschriftzelle ist, und ob im Fall einer Überschriftzelle sich diese auf eine Zeile oder Spalte oder beides bezieht:

    Dialogfeld „Zelleneigenschaften“; Festlegen einer Zeile (normalerweise die erste Zeile) als Überschriftzeile.
  • Komplexe Datentabellen:

    In einigen Fällen, in denen komplexe Tabellen mit zwei oder mehr Überschriftebenen vorhanden sind, reicht das normale Dialogfeld „Tabelleneigenschaften“ nicht aus, um alle benötigten Strukturinformationen anzugeben. Für diese Arten von komplexen Tabellen müssen direkte Beziehungen zwischen den Überschriften und deren dazugehörigen Zellen erstellt werden. Zu diesem Zweck werden die Attribute Überschrift und ID verwendet. Beispiel: In der folgenden Tabelle werden die Überschriften den IDs zugeordnet, um eine programmatische Verknüpfung für Benutzer von Hilfstechnologien zu erstellen.

    Hinweis:

    Das ID-Attribut ist in Standardinstallationen nicht verfügbar. Es kann durch Konfigurieren von HTML-Regeln und des Serialisierungsprogramms im RTE aktiviert werden.

    Hinweis:

    Tabellen sollten mit der Komponente Tabelle umgesetzt werden. Obwohl Tabellen in der Textkomponente erstellt werden können, wird dieses Verfahren nicht empfohlen.

    <table>
       <tr>
         <th rowspan="2" id="h">Homework</th>
         <th colspan="3" id="e">Exams</th>
         <th colspan="3" id="p">Projects</th>
       </tr>
       <tr>
         <th id="e1" headers="e">1</th>
         <th id="e2" headers="e">2</th>
         <th id="ef" headers="e">Final</th>
         <th id="p1" headers="p">1</th>
         <th id="p2" headers="p">2</th>
         <th id="pf" headers="p">Final</th>
       </tr>
       <tr>
        <td headers="h">15%</td>
        <td headers="e e1">15%</td>
        <td headers="e e2">15%</td>
        <td headers="e ef">20%</td>
        <td headers="p p1">10%</td>
        <td headers="p p2">10%</td>
        <td headers="p pf">15%</td>
       </tr>
      </table>

    Um dies in AEM zu erreichen, müssen Sie das Markup hinzufügen, indem Sie direkt den Modus zur Bearbeitung des Quellcodes verwenden.

    Hinweis:

    Diese Funktion ist in einer Standardinstallation nicht sofort verfügbar. Dazu ist die Konfiguration des RTE, der HTML-Regeln und des Serialisierungsprogramms erforderlich.

Weitere Informationen: Informationen und Beziehungen (1.3.1)

Sensorische Eigenschaften (1.3.3)

  • Erfolgskriterium 1.3.3
  • Level A
  • Sensorische Eigenschaften: Anweisungen, die zum Verstehen und Bedienen von Inhalt verfügbar sind, beziehen sich nicht nur auf sensorische Eigenschaften der Komponenten wie Form, Größe, visuelle Position, Ausrichtung oder Klang.

Zweck: Sensorische Eigenschaften (1.3.3)

Entwickler konzentrieren sich bei der Präsentation von Informationen oft auf visuelle Design-Funktionen wie Farbe, Form, Textstil oder die absolute oder relative Position eines Inhaltselements. Diese können zwar sehr wirkungsvolle Entwicklungsmethoden zur Vermittlung von Informationen sein, doch blinde Menschen oder Menschen mit eingeschränktem Sehvermögen können nicht auf Informationen zugreifen, für die die visuelle Erkennung von Attributen wie Position, Farbe oder Form erforderlich ist.

Entsprechend sind Informationen, für die zwischen verschiedenen Klängen (z. B. Inhalte, die von einer Frau oder einem Mann gesprochen werden) unterschieden werden muss, für Menschen mit eingeschränktem Hörvermögen nicht verfügbar, wenn sie nicht in Textalternativen für den Audioinhalt umgesetzt wurden.

Hinweis:

Die Anforderungen, die sich auf die Alternativen für Farben beziehen, finden Sie unter Verwendung von Farbe.

Erfüllen: Sensorische Eigenschaften (1.3.3)

Stellen Sie sicher, dass Informationen, die sich auf visuelle Eigenschaften von Seiteninhalten beziehen, auch in alternativen Formaten präsentiert werden.

  • Verlassen Sie sich nicht auf die visuelle Position, um Informationen bereitzustellen. Wenn Sie beispielsweise Benutzer auf ein Menü rechts auf der Seite verweisen möchten, über das sie auf weitere Informationen zugreifen können, beziehen Sie sich nicht auf das Menü rechts, sondern geben Sie den Namen für das Menü an (zum Beispiel über eine Überschrift) und beziehen Sie sich im Text auf diesen Namen.
  • Verlassen Sie sich nicht auf den Textstil (z. B. fett oder kursiv gedruckter Text) als einzige Methode zur Vermittlung von Informationen.

Hinweis:

Die Verwendung beschreibender Begriffe ist dann akzeptabel, wenn diese auch in einem nicht visuellen Kontext eine Bedeutung haben. So ist z. B. die Verwendung von oben und unten in der Regel akzeptabel, da diese jeweils Inhalt vor und nach einem bestimmten Inhaltselement implizieren. Dabei bleibt die Bedeutung auch erhalten, wenn der Inhalt laut ausgesprochen wird.

Weitere Informationen - Sensorische Eigenschaften (1.3.3)

Unterscheidbar (1.4)

Verwendung von Farbe (1.4.1)

  • Erfolgskriterium 1.4.1
  • Level A
  • Verwendung von Farbe: Farbe wird nicht als einziges visuelles Mittel eingesetzt, um Informationen zu vermitteln, eine Aktion zu kennzeichnen, eine Antwort einzuholen oder ein visuelles Element zu unterscheiden.

Hinweis:

Dieses Erfolgskriterium bezieht sich speziell auf die Farbwahrnehmung. Andere Wahrnehmungsformen werden unter Anpassbar (1.3) behandelt. Hierzu gehören der programmtechnische Zugriff auf Farbe und andere visuelle Darstellungskodierungen.

Zweck - Verwendung von Farbe (1.4.1)

Farbe bietet sichtbar eine effektive Möglichkeit, die Ästhetik von Webseiten zu verbessern, und kann auch die Vermittlung von Informationen unterstützen. Es gibt jedoch eine Vielzahl visueller Beeinträchtigungen, von Farbenblindheit bis zur Beeinträchtigung der Farbwahrnehmung, die dazu führt, dass manche Menschen zwischen bestimmten Farben nicht unterscheiden können. Aus diesem Grund ist die farbliche Kodierung ein unzuverlässiges Mittel für die Bereitstellung von Informationen.

Jemand mit einer Rot-Grün-Sehschwäche kann z. B. nicht zwischen Grünschattierungen und Rotschattierungen unterscheiden. Er sieht möglicherweise beide Farben als eine dritte Farbe (z. B. braun) und kann daher nicht zwischen rot, grün und braun unterscheiden.

Außerdem können Menschen, die einen reinen Textbrowser, monochrome Anzeigen oder einen Schwarzweiß-Ausdruck auf Papier nutzen, keine Farben wahrnehmen.

Erfüllen - Verwendung von Farbe (1.4.1)

Immer wenn Farbe verwendet wird, um Informationen zu vermitteln, müssen Sie sicherstellen, dass die verfügbaren Informationen auch verfügbar sind, wenn die Farbe nicht sichtbar ist.

Stellen Sie z. B. sicher, dass die durch die Farbe vermittelte Information auch explizit im Text enthalten ist. Die folgende Abbildung zeigt, wie sowohl die Farbe als auch der Text die Verfügbarkeit von Sitzplätzen für eine Vorstellung anzeigen:

Vorstellung

Verfügbarkeit

Dienstag, 16. Märzth

PLÄTZE VERFÜGBAR

Mittwoch, 17. März

PLÄTZE VERFÜGBAR

Donnerstag, 18. Märzth

AUSVERKAUFT

Wenn Farbe als Hinweis für die Bereitstellung von Informationen verwendet wird, sollten Sie einen weiteren visuellen Hinweis einsetzen, wie einen anderen Schriftschnitt (z. B. fett, kursiv) oder eine andere Schriftart. Dies hilft Menschen mit schlechtem Sehvermögen oder einer beeinträchtigten Farbwahrnehmung, die Information zu erkennen. Man darf sich jedoch nicht vollständig auf diese Maßnahmen verlassen, da sie für Menschen, die die Seite überhaupt nicht sehen können, keine Hilfe bieten.

Weitere Informationen - Verwendung von Farbe (1.4.1)

Kontrast (Minimum) (1.4.3)

  • Erfolgskriterium 1.4.3
  • Level AA
  • Kontrast (Minimum): Die visuelle Darstellung von Text und Bildern von Text hat ein Kontrastverhältnis von mindestens 4,5:1 mit folgenden Ausnahmen:
    • Großer Text: Großer Text und Bilder von großem Text haben ein Kontrastverhältnis von mindestens 3:1.
    • Nebensächlich: Für Text oder Bilder eines Texts, die Teil einer inaktiven Komponente der Benutzerschnittstelle, reine Dekoration, für niemanden sichtbar oder Teil eines Bildes sind, welches signifikante andere visuelle Inhalte enthält, gibt es keine Kontrastanforderung
    • Firmenschriftzüge: Für Text, der Teil eines Logos oder eines Markennamens ist, gibt es keine Kontrastanforderungen.

Zweck - Kontrast (Minimum) (1.4.3)

Manche Menschen mit einem beeinträchtigten Sehvermögen können nicht zwischen bestimmten Farbpaaren mit geringem Kontrast unterscheiden. Die Barrierefreiheit ist für diese Menschen in folgenden Situationen eingeschränkt:

  • Wenn zwischen dem Text und der Hintergrundfarbe nur wenig Kontrast besteht.
  • Wenn die Farbkodierung des Textes (wie Link-Text und Text ohne Link) für die Unterscheidung der Informationen wichtig ist.

Hinweis:

Text, der ausschließlich zu dekorativen Zwecken verwendet wird, ist von diesem Erfolgskriterium nicht betroffen.

Erfüllen - Kontrast (Minimum) (1.4.3)

Stellen Sie sicher, das zwischen dem Text und der Hintergrundfarbe ausreichend Kontrast besteht. Das Kontrastverhältnis hängt von der Größe und dem Schriftschnitt des betroffenen Textes ab:

  • Für Text mit einer Größe von weniger als 18 Punkt (oder 14 Punkt bei Fettschrift) sollte das Kontrastverhältnis zwischen Text/Bildern mit Text und dem Hintergrund mindestens 4,5:1 betragen.
  • Für Text mit einer Größe von mindestens 18 Punkt (oder 14 Punkt bei Fettschrift) sollte das Kontrastverhältnis mindestens 3:1 betragen.
  • Falls der Hintergrund gemustert ist, sollte der Hintergrund um alle Texte abgestuft sein, damit das Verhältnis von 4,5:1 oder 3:1 beibehalten wird.

Verwenden Sie ein Farbkontrasttool, um das Kontrastverhältnis zu prüfen, z. B. den Color Contrast Analyser von Paciello Group oder den Color Contrast Checker von WebAIM. Mit diesen Tools können Sie Farbpaare prüfen und erkennen mögliche Kontrastprobleme.

Wenn es für Sie nicht so wichtig ist, das Aussehen Ihrer Seite festzulegen, können Sie alternativ keine Farben für den Hintergrund und den Text im Vordergrund festlegen. Dann brauchen Sie den Kontrast nicht zu prüfen, weil der Browser des Benutzers die Farbe für den Text und den Hintergrund ermittelt.

Falls es nicht möglich ist, die geforderten Kontraststufen zu erfüllen, müssen Sie einen Link zu einer alternativen, identischen Version der Seite bereitstellen (auf der keine Farbkontrastprobleme vorliegen) oder dem Benutzer die Anpassung des Kontrasts des Farbschemas der Seite an seine eigenen Anforderungen ermöglichen.

Weitere Informationen - Kontrast (Minimum) (1.4.3)

Bilder von Text (1.4.5)

  • Erfolgskriterium 1.4.5
  • Level AA
  • Bilder von Text: Falls die verwendeten Technologien die visuelle Präsentation realisieren können, wird für die Vermittlung von Informationen Text verwendet und keine Bilder von Text. Dabei gelten folgende Ausnahmen:
    • Anpassbar: Das Bild des Texts kann visuell an die Anforderungen des Benutzers angepasst werden.
    • Erforderlich: Eine bestimmte Präsentation von Text ist für die zu vermittelnden Informationen erforderlich.

Hinweis:

Firmenschriftzüge (Texte, die Teil eines Logos oder eines Markennamens sind) werden als erforderlich angesehen.

Zweck - Bilder von Text (1.4.5)

Bilder von Text werden häufig verwendet, wenn ein bestimmter Textstil bevorzugt wird. Z. B. bei einem Firmenschriftzug oder wenn der Text aus einer anderen Quelle generiert wurde (z. B. ein eingescanntes Papierdokument). Im Vergleich mit in HTML dargestelltem Text, dessen Stil mittels CSS festgelegt wird, fehlt Bildern von Text jedoch die Flexibilität, die Größe oder das Erscheinungsbild zu ändern, was für Menschen mit Beeinträchtigungen der Sehfähigkeit oder mit Leseschwäche erforderlich sein kann.

Erfüllen - Bilder von Text (1.4.5)

Wenn Bilder von Text verwendet werden müssen, nutzen Sie CSS, um die Bilder von Text in HTML durch einen identischen Text zu ersetzen, damit der Text in einer anpassbaren Version verfügbar ist. Ein Beispiel hierfür finden Sie unter C30: Verwenden von CSS, um Text durch Bilder von Text zu ersetzen und ein Steuerelement zum Umschalten auf der Benutzeroberfläche bereitzustellen.

Weitere Informationen - Bilder von Text (1.4.5)

Grundsatz 2: Bedienbar

Pausieren, Beenden, Ausblenden (2.2.2)

  • Erfolgskriterium 2.2.2
  • Level A
  • Pausieren, Beenden, Ausblenden: Für sich bewegende, blinkende, scrollende oder sich automatisch aktualisierende Informationen gelten folgenden Regeln:
    • Sich bewegend, blinkend, scrollend: Für alle sich bewegenden, blinkenden oder scrollenden Informationen, die (a) automatisch starten, (b) länger als 5 Sekunden dauern und (c) parallel zu anderen Inhalten dargestellt werden, muss es einen Mechanismus für den Benutzer geben, um diese zu pausieren, zu beenden oder auszublenden, sofern die Bewegung, das Blinken oder das Scrollen nicht Teil einer Aktivität ist, bei der dies erforderlich ist.
    • Automatische Aktualisierung: Für alle sich automatisch aktualisierenden Informationen, die (a) automatisch starten und (b) parallel mit anderen Inhalten dargestellt werden, muss es einen Mechanismus geben, damit der Benutzer die Aktualisierung pausieren, beenden oder ausblenden oder die Häufigkeit der Aktualisierung kontrollieren kann, sofern die automatische Aktualisierung nicht Teil einer Aktivität ist, bei der dies erforderlich ist.

Folgendes sollte beachtet werden:

  1. Die Anforderungen für flackernden oder blinkenden Inhalt finden Sie unter Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen (2.3).
  2. Jeglicher Inhalt, der dieses Erfolgskriterium nicht erfüllt, kann die Möglichkeit eines Benutzers beeinträchtigen, die gesamte Seite zu nutzen. Daher muss jeglicher Inhalt auf einer Webseite (egal ob er dazu dient, andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsanforderung 5: Nicht störend.
  3. Inhalt, der regelmäßig durch Software aktualisiert wird oder der auf den Benutzer-Agenten gestreamt wird, darf keine Informationen bewahren oder darstellen, die zwischen dem Initiieren des Anhaltens und dem Fortsetzen der Darstellung generiert oder empfangen wurden, da dies technisch möglicherweise nicht machbar ist und in vielen Situationen irreführend sein kann.
  4. Eine Animation, die Teil einer Ladephase oder eines ähnlichen Szenarios ist, kann als erforderlich erachtet werden, wenn während dieser Phase keine Benutzerinteraktion möglich ist und wenn das Fehlen einer Fortschrittsanzeige Benutzer verwirren oder zu der Annahme verleiten kann, der Inhalt sei eingefroren oder beschädigt.

Zweck - Pausieren, Beenden, Ausblenden (2.2.2)

Manche Benutzer empfinden Inhalte, die sich bewegen, als störend und haben Schwierigkeiten sich auf andere Bereiche der Seite zu konzentrieren. Darüber hinaus sind solche Inhalte für Menschen schwierig, die beim Lesen Probleme haben, sich bewegendem Text zu folgen.

Erfüllen - Pausieren, Beenden, Ausblenden (2.2.2)

Abhängig von der Art des Inhalts können Sie beim Erstellen von Webseiten mit sich bewegendem, blitzendem oder blinkendem Inhalt die folgenden Empfehlungen beachten:

  • Bieten Sie die Möglichkeit, das Scrollen des Inhalts anzuhalten, um Benutzern Zeit zum Lesen zu geben. Z. B. Nachrichtenticker oder automatisch aktualisierter Text.
  • Stellen Sie sicher, dass blinkende Inhalte maximal fünf Sekunden lang blinken.
  • Nutzen Sie Technologien, mit denen die Anzeige von blinkenden Inhalten im Browser deaktiviert werden kann. Z. B. Dateien im GIF- (Graphics Interchange Format) oder APNG-Format (Animated Portable Network Graphics).
  • Bieten Sie auf der Webseite ein Formularsteuerelement an, über das Benutzer sämtliche blinkenden Inhalte auf der Seite deaktivieren können.
  • Falls eine der obigen Maßnahmen nicht möglich ist, bieten Sie einen Link zu einer Seite, die alle Inhalte ohne Blinken zeigt.

Weitere Informationen - Pausieren, Beenden, Ausblenden (2.2.2)

Anfälle (2.3)

Grenzwert von maximal dreimaligem Blitzen (2.3.1)

  • Erfolgskriterium 2.3.1
  • Level A
  • Grenzwert von maximal dreimaligem Blitzen: Webseiten dürfen nichts enthalten, das in einem Zeitraum von einer Sekunde öfter als dreimal blitzt oder dessen Blitz unterhalb der allgemeinen Grenzwerte für Blitze und rote Blitze liegt.

Hinweis:

Jeglicher Inhalt, der dieses Erfolgskriterium nicht erfüllt, kann die Möglichkeit eines Benutzers beeinträchtigen, die gesamte Seite zu nutzen. Daher muss jeglicher Inhalt auf einer Webseite (egal ob er dazu dient, andere Erfolgskriterien zu erfüllen oder nicht) dieses Erfolgskriterium erfüllen. Siehe Konformitätsanforderung 5: Nicht störend.

Zweck - Grenzwert von maximal dreimaligem Blitzen (2.3.1)

In bestimmten Fällen können blitzende Inhalte photosensitive Anfälle auslösen. Dieses Erfolgskriterium ermöglicht Benutzern den Zugriff und die Nutzung des gesamten Inhalts ohne Beeinträchtigung durch blitzende Inhalte.

Erfüllen - Grenzwert von maximal dreimaligem Blitzen (2.3.1)

Stellen Sie sicher, dass die folgenden Techniken zur Anwendung kommen:

  • Stellen Sie sicher, dass Komponenten in einem Zeitraum von einer Sekunde nicht öfter als dreimal blitzen.
  • Falls die obige Bedingung nicht erfüllt werden kann, platzieren Sie den blitzenden Inhalt in einem kleinen sicheren Bereich in Pixel auf dem Bildschirm. Dieser Bereich wird anhand einer komplexen Formel berechnet, die unter G176: Blitzende Bereiche ausreichend klein halten behandelt wird. Diese Technik sollte ausschließlich dann angewendet werden, wenn ein blitzender Inhalt unbedingt erforderlich ist.

Weitere Informationen - Grenzwert von maximal dreimaligem Blitzen (2.3.1)

Seite mit Titel versehen (2.4.2)

  • Erfolgskriterium 2.4.2
  • Level A
  • Seite mit Titel versehen: Webseiten haben einen Titel, der das Thema oder den Zweck beschreibt

Zweck - Seite mit Titel versehen (2.4.2)

Dieses Erfolgskriterium ist für alle Benutzer hilfreich - unabhängig von etwaigen Beeinträchtigungen - um schnell den Inhalt einer Webseite zu ermitteln, ohne die Seite vollständig zu lesen. Dies ist insbesondere dann nützlich, wenn mehrere Webseiten in Browsertabs geöffnet sind, da der Seitentitel auf den Tabs angezeigt wird, was die Seiten schnell auffindbar macht.

Erfüllen - Seite mit Titel versehen (2.4.2)

Wenn Sie im AEM eine neue HTML-Seite erstellen, können Sie den Seitentitel angeben. Stellen Sie sicher, dass der Titel den Inhalt der Seite so beschreibt, dass Besucher schnell feststellen können, ob der Inhalt für ihre Anforderungen relevant ist oder nicht.

Sie können den Seitentitel auch gemeinsam mit der Seite bearbeiten, indem Sie Sidekick > Registerkarte Seite > Seiteneigenschaften… auswählen.

Weitere Informationen - Seite mit Titel versehen (2.4.2)

Linkzweck (im Kontext) (2.4.4)

  • Erfolgskriterium 2.4.4
  • Level A
  • Linkzweck (im Kontext): Der Zweck jedes Links kann allein durch den Linktext oder durch den Linktext zusammen mit dem programmatisch festgelegten Linkkontext bestimmt werden. Ausgenommen sind Fälle, in denen der Zweck des Links für Benutzer generell mehrdeutig ist.

Zweck - Linkzweck (im Kontext) (2.4.4)

Unabhängig von etwaigen Beeinträchtigungen ist es für alle Benutzer von entscheidender Bedeutung, dass durch einen passenden Linktext klar erkenntlich ist wohin ein Link führt. Dies erleichtert Benutzern die Entscheidung, ob sie einem Link folgen möchten oder nicht. Für sehende Benutzer ist ein aussagekräftiger Linktext ausgesprochen nützlich, wenn sich auf einer Seite mehrere Links befinden (vor allem, wenn eine Seite sehr viel Text enthält), da ein aussagekräftiger Linktext einen deutlicheren Hinweis auf die Funktion der Zielseite liefert. Gleichzeitig können Benutzer von Eingabehilfentechnologien, mit denen eine Liste aller Links auf einer Seite erstellt werden kann, den Linktext außerhalb des Kontextes einfacher nachvollziehen.

Erfüllen - Linkzweck (im Kontext) (2.4.4)

Stellen Sie vor allem sicher, dass der Linktext den Zweck eines Links eindeutig beschreibt.

  • Schlechtes Beispiel:
    • Text: Einzelheiten zu unseren Abendkursen im Herbst 2010 finden Sie hier.
    • Grund: Es geht nicht deutlich und unmissverständlich hervor wohin der Link führt.
  • Gutes Beispiel:
    • Text: Abendkurse im Herbst 2010 – Details.
    • Grund: Durch eine kleine Anpassung des Textes und der Position des Linkelements lässt sich der Linktext verbessern:

Links sollten auf den Seiten eine konsistente Bezeichnung erhalten. Dies gilt insbesondere für Navigationsleisten. Wenn ein Link zu einer bestimmten Seite z. B. auf einer Seite Publikationen heißt, dann sollte er auch auf allen anderen Seiten denselben Namen erhalten.

Zum Zeitpunkt des Schreibens gibt es jedoch einige Probleme mit der Verwendung von Titeln:

  • Im Title-Attribut enthaltener Text ist in der Regel nur für Mausbenutzer als QuickInfo-Popup verfügbar. Über eine Tastatur ist kein Zugriff möglich.
  • Die Sprachausgabe kann Title-Attribute auslesen, diese Funktion ist jedoch nicht unbedingt standardmäßig aktiviert. Daher ist es für Benutzer eventuell nicht ersichtlich, dass ein Title-Attribut vorhanden ist.
  • Es ist schwierig das Erscheinungsbild des Titeltextes anzupassen, weshalb es für manche Menschen schwierig oder unmöglich sein kann, diesen zu lesen.

Das Title-Attribut kann also genutzt werden, um zusätzlichen Kontext zu einem Link bereitzustellen, Sie sollten aber diese Einschränkungen bedenken und es daher nicht als Alternative für einen geeigneten Linktext nutzen.

Wenn ein Link aus einem Bild besteht, müssen Sie sicherstellen, dass der alternative Text für das Bild das Ziel des Links beschreibt. Wenn z. B. ein Bild eines Bücherregals als Link zu den Publikationen einer Person festgelegt wird, sollte der alternative Text Publikationen von John Smith lauten und nicht Bücherregal.

Falls der Link-Anker Text enthält, der ergänzend zum Bildelement den Zweck des Links beschreibt (und dieser Text neben dem Bild angezeigt wird), können Sie für das Bild alternativ ein leeres Alt-Attribut verwenden:

<a href="publications.html">
<img src = "bookshelf.jpg" alt = "" />
John Smith’s publications
</a>

Hinweis:

Der obige Ausschnitt dient der Illustration. Es wird empfohlen, die Komponente Bild zu verwenden.

Auch wenn es angeraten ist, einen Linktext bereitzustellen, der den Zweck des Links verdeutlicht ohne zusätzlichen Kontext zu benötigen, gibt es Fälle, in denen dies nicht möglich ist. Links ohne Kontext können in den folgenden Fällen verwendet werden. HTML-Beispiele hierzu finden Sie unter Erfolgskriterium 2.4.4 erfüllen.

  • Wenn der Linktext zu einer Liste eng zusammenhängender Links gehört und wenn das den Link umgebende Listenelement ausreichend Kontext liefert.
  • Wenn der Zweck eines Links aus dem vorangehenden (nicht dem nachfolgenden) Text des Absatzes klar hervorgeht.
  • Wenn der Link in einer Datentabelle enthalten ist und der Zweck über die zugehörigen Überschriften deutlich erkennbar ist.
  • Wenn eine Liste mit Links in einem Satz Überschriften enthalten ist und die Überschrift einen ausreichenden Kontext liefert.
  • Wenn eine Liste mit Links in einem geschachtelten Link enthalten ist und das übergeordnete Listenelement des geschachtelten Links einen ausreichenden Kontext liefert.

In einigen Fällen, in denen sich mehrere Links auf einer Seite befinden (von denen jeder das Ziel des Links durch komplexe, aber erforderliche Details angibt), kann es sinnvoll sein, eine alternative Version der Webseite anzubieten, die denselben Inhalt anzeigt, auf der der Linktext jedoch weniger ausführlich ist.

Alternativ können Skripts verwendet werden. Dabei wird im Link selbst ein minimaler Text bereitgestellt. Bei der Aktivierung des entsprechenden Steuerelements im oberen Bereich der Seite wird der Linktext jedoch erweitert und es werden mehr Details angezeigt. Einen ähnlichen Ansatz bietet die Verwendung von CSS, um den vollständigen Link für sehende Benutzer auszublenden, ihn für Benutzer der Sprachausgabe jedoch auszugeben. Dies überschreitet den Rahmen dieses Dokuments, weitere Informationen hierzu finden Sie jedoch unter Weitere Informationen - Linkzweck (Im Kontext) (2.4.4).

Weitere Informationen - Linkzweck (im Kontext) (2.4.4)

Grundsatz 3: Verständlich

Machen Sie Inhalt lesbar und verständlich (3.1)

Sprache der Seite (3.1.1)

  • Erfolgskriterium 3.1.1
  • Level A
  • Sprache der Seite: Die voreingestellte menschliche Sprache einer Webseite kann programmatisch bestimmt werden.

Zweck - Sprache der Seite (3.1.1)

Der Zweck dieses Erfolgskriteriums besteht darin, sicherzustellen, dass Texte und andere linguistische Inhalte fehlerfrei gerendert werden. Für Benutzer der Sprachausgabe stellt dies sicher, dass der Inhalt korrekt ausgesprochen wird, während bei visuellen Browsern die Wahrscheinlichkeit höher ist, dass bestimmte Zeichensätze richtig angezeigt werden.

Erfüllen - Sprache der Seite (3.1.1)

Um dieses Erfolgskriterium zu erfüllen, kann die Standardsprache einer Webseite über das Attribut lang innerhalb des Elements <html> am Anfang der Seite festgelegt werden. Beispiel:

  • Wenn eine Seite z. B. in britischem Englisch verfasst ist, sollte das Element <html> wie folgt angegeben werden:
        <html lang = “en-gb”>
  • Wenn eine Seite hingegen als Seite in US-Englisch gerendert werden soll, ist folgende Angabe erforderlich:
        <html lang = “en-us”>

In AEM wird die Standardsprache Ihrer Seite beim Erstellen der Seite festgelegt, kann aber beim Bearbeiten der Seite geändert werden. Wählen Sie dazu Sidekick > Registerkarte Seite > Seiteneigenschaften… > Registerkarte Erweitert.

Weitere Informationen - Sprache der Seite (3.1.1)

Sprache von Teilen (3.1.2)

  • Erfolgskriterium 3.1.2
  • Level AA
  • Sprache von Teilen: Die menschliche Sprache aller Abschnitte und Sätze im Inhalt kann programmatisch bestimmt werden. Ausgenommen sind Eigennamen, technische Fachbegriffe, Wörter einer unbestimmten Sprache und Wörter oder Wendungen, die Teil des Jargons des direkt umliegenden Textes sind.

Zweck - Sprache von Teilen (3.1.2)

Der Zweck dieses Erfolgskriteriums ähnelt dem Zweck des Erfolgskriteriums Sprache der Seite. Es gilt jedoch für Webseiten, die auf einer Seite Inhalte im mehreren Sprachen enthalten (z. B. in Form von Zitaten oder wenig geläufigen Lehnwörtern).

Seiten, die dieses Erfolgskriterium erfüllen, bieten folgende Möglichkeiten:

  • Software für die Braille-Übersetzung kann akzentuierte Zeichen einfügen.
  • Die Sprachausgabe kann betroffene Wörter außerhalb der Standardsprache korrekt aussprechen.
  • Übersetzungstools wie der Google Übersetzer können Inhalt korrekt von einer Sprache in eine andere übersetzen.

Erfüllen - Sprache von Teilen (3.1.2)

Mit dem Attribut lang können Änderungen der Sprache des Inhalts ermittelt werden. Ein deutschsprachiges Zitat (ISO 639-1-Code “de”) kann z. B. wie folgt angezeigt werden:

<blockquote cite = "John F. Kennedy" lang = "de"> 
     <p>Ich bin ein Berliner</p>
 </blockquote>

Hinweis:

Blockzitate werden in standardmäßigen Instanzen nicht unterstützt. Sie können eine benutzerdefinierte Komponente entwickeln, um dieses Feature zu unterstützen.

Auf ähnliche Weise kann der Browser ein wenig geläufiges Lehnwort oder eine Redewendung korrekt rendern, wenn das Element span wie folgt verwendet wird:

<p>The only French phrase I know is <span lang = “fr”>je ne sais quoi</span>.</p>

Hinweis:

Dieses Erfolgskriterium muss nicht beachtet werden, wenn Namen oder Städte in verschiedenen Sprachen vorkommen oder wenn Sie Lehnwörter oder Redewendungen verwenden, die in der Standardsprache gängig geworden sind (wie Schadenfreude im Englischen).

Um ein span-Element mit der entsprechenden Sprache hinzuzufügen, können Sie Ihren HTML-Code im Bearbeitungsmodus für den Quelltext im RTE manuell bearbeiten, damit er wie oben aussieht. Alternativ kann ein Systemadministrator das Attribut lang im RTE einfügen (siehe Unterstützung für zusätzliche HTML-Elemente und -Attribute hinzufügen).

Weitere Informationen - Sprache von Teilen (3.1.2)

Helfen Sie Benutzern, Fehler zu vermeiden und zu korrigieren (3.3)

Beschriftungen oder Anweisungen (3.3.2)

  • Erfolgskriterium 3.3.2
  • Level A
  • Beschriftungen oder Anweisungen: Wenn der Inhalt eine Eingabe durch den Benutzer erfordert, werden Beschriftungen oder Anweisungen bereitgestellt.

Zweck - Beschriftungen oder Anweisungen (3.3.2)

Das Bereitstellen von Anweisungen, die Menschen beim Ausfüllen von Formularen unterstützen, bildet einen entscheidenden Bestandteil der bewährten Verfahrenspraxis für eine benutzerfreundliche Oberfläche. Dies ist insbesondere für Menschen mit visuellen oder kognitiven Einschränkungen hilfreich, die das Layout eines Formulars und die Art der in einem bestimmten Formularfeld anzugebenden Daten andernfalls nur schwer nachvollziehen können.

Im AEM wird eine Standardbeschriftung eingefügt, wenn Sie eine Formularkomponente zur Seite hinzufügen, z. B. ein Textfeld. Dieser Standardtitel beruht auf dem Typ der Komponente. Auf der Registerkarte Titel und Text des Bearbeitungsdialogfelds für das Feld können Sie Ihren eigenen Titel angeben. Es ist wichtig, dass Sie sicherstellen, dass Benutzer mithilfe von Beschriftungen leichter nachvollziehen können welche Daten in den einzelnen Formularkomponenten erwartet werden.

Registerkarte „Titel und Text“ (Dialogfeld „Bearbeiten“). Der Titel „Description“ wurde hinzugefügt.

Das Feld Titel muss für Feldelemente verwendet werden, weil es eine Beschriftung bereitstellt, die für Sprachausgabetechnologien verfügbar ist. Es reicht nicht aus, einfach nur eine Beschriftung im Text neben dem Feld anzugeben.

Für einige Komponenten können Beschriftungen auch über das Kontrollkästchen Titel ausblenden ausgeblendet werden. Auf diesem Weg ausgeblendete Beschriftungen sind für Sprachausgabetechnologien weiterhin verfügbar, werden auf dem Bildschirm jedoch nicht angezeigt. Auch wenn dies in einigen Situationen einen guten Ansatz bilden kann, ist es in der Regel besser, möglichst immer eine sichtbare Beschriftung hinzuzufügen, da manche Benutzer nur einen sehr kleinen Ausschnitt des Bildschirms sehen (jeweils ein Feld) und die Felder nur anhand der Beschriftung richtig zuordnen können.

Bild-Schaltflächen

Wenn Bild-Schaltflächen verwendet werden (z. B. die Komponente Bild-Schaltfläche ) liefert das Feld Titel auf der Registerkarte Titel und Text des Bearbeitungsdialogfelds den Alt-Text für das Bild und nicht die Beschriftung. Im folgenden Beispiel wurde daher für das Bild mit dem Text Submit im Bearbeitungsdialogfeld der Alt+Text Submit über das Feld Titel hinzugefügt.

Bild-Schaltfläche mit im Titel-Feld festgelegtem Alt-Text (Dialogfeld „Bearbeiten“).

Gruppen von Formularfeldern

Wenn es eine Gruppe zusammenhängender Steuerelemente gibt, wie eine Optionsfeldgruppe, kann sowohl ein Titel für die Gruppe erforderlich sein als auch für die einzelnen Steuerelemente. Wenn Sie im AEM ein Set Optionsschaltflächen hinzufügen, enthält das Feld Titel diesen Gruppentitel, während die Titel der einzelnen Schaltflächen beim Erstellen der Optionsschaltflächen (Elemente) angegeben werden.

Hinzufügen von Elementen zur Optionsfeldgruppe. Der Gruppentitel lautet „Contact me by“ - im Titel-Feld definiert.

Es gibt jedoch keine programmatische Zuordnung zwischen dem Gruppentitel und den Optionsschaltflächen. Der Titel muss beim Bearbeiten der Vorlage in die erforderlichen Tags fieldset und legend gesetzt werden, um diese Zuordnung herzustellen. Dies kann ausschließlich über die Bearbeitung des Seitenquellcodes erfolgen. Alternativ kann ein Systemadministrator die Unterstützung für diese Elemente hinzufügen, damit sie im Dialogfeld Feldeigenschaften angezeigt werden (siehe Unterstützung für zusätzliche HTML-Elemente und -Attribute hinzufügen).

Weitere Aspekte für Formulare

Wenn Daten in einem bestimmten Format eingegeben werden müssen, sollten Sie die in der Beschriftung verdeutlichen. Wenn z. B. ein Datum im Format DD.MM.YYYY eingegeben werden soll, fügen Sie diese Angabe in die Beschriftung ein. Dies führt dazu, dass die Beschriftung automatisch zusammen mit dem gewünschten Format ausgegeben wird, wenn Benutzer der Sprachausgabe auf das Feld treffen.

Wenn die Eingabe in ein Feld erforderlich ist, verdeutlichen Sie dies, indem Sie das Wort „erforderlich“ in die Beschriftung einfügen. AEM fügt ein Sternchen hinzu, wenn ein Feld erforderlich ist. Idealerweise sollte jedoch das Wort erforderlich direkt in die Beschriftung eingefügt werden (im Feld Titel im Bearbeitungsdialogfeld).

Hinzufügen weiterer Informationen im Feld „Titel“ (das Wort „required“) für Benutzer der Sprachausgabe.

Auch die Positionierung von Beschriftungen ist wichtig, da sie das Auffinden der entsprechenden Felder erleichtert. Dies ist besonders wichtig, wenn es sich um komplexe Formulare handelt. Halten Sie sich an folgende Richtlinien:

  • Kontrollkästchen oder Optionsschaltflächen:
    Beschriftungen direkt rechts neben dem Feld platzieren.
  • Alle anderen Formularkomponenten (z. B. Textfelder, Kombinationsfelder):
    Beschriftungen entweder direkt über dem Feld oder direkt links vom Feld platzieren.

In einfachen Formularen mit wenigen Funktionen kann die Beschriftung einer Schaltfläche mit Senden als Beschriftung für das angrenzende Feld dienen (z. B. Suchen). Dies ist in Situationen nützlich, in denen wenig Platz für die Beschriftung vorhanden ist.

Weitere Informationen - Beschriftungen oder Anweisungen (3.3.2)

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie