Noch nicht barrierefreie Tools & -Template-Bereiche

Geprüft mit folgenden Chrome-Browsererweiterungen:
INCLUDIA: https://chromewebstore.google.com/search/Includia%20Accessibility%20Checker
WAVE: https://chromewebstore.google.com/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
Siteimprove: https://chromewebstore.google.com/detail/siteimprove-accessibility/djcglbmbegflehmbfleechkjhmedcopn
Silktide: https://chromewebstore.google.com/detail/silktide-accessibility-ch/mpobacholfblmnpnfbiomjkecoojakah

Button-Widget

1. Widget "Button"

Fehler: Possible heading (WAVE)

What It Means

Text appears to be a heading but is not a heading element.

Mehr…

Why It Matters

Heading elements (<h1>-<h6>) provide important document structure, outlines, and navigation functionality to assistive technology users. If heading text is not a true heading, this information and functionality will not be available for that text.

How to Fix It

If the paragraph is a section heading, use a heading element instead (<h1>-<h6>).

The Algorithm... in English

A <p> element contains less than 50 characters and is either:

20 pixels or bigger
16 pixels or bigger and bold and/or italicized

Standards and Guidelines

Weniger…

Fehler: Mögliche Überschrift (WAVE)

Was das bedeutet

Text sieht aus wie eine Überschrift, ist aber kein Überschriftenelement.

Mehr…

Warum das wichtig ist

Überschriftenelemente (<h1>-<h6>) bieten Benutzern unterstützender Technologien wichtige Dokumentstruktur, Gliederungen und Navigationsfunktionen. Wenn der Überschriftentext keine echte Überschrift ist, sind diese Informationen und Funktionen für diesen Text nicht verfügbar.

Wie sich das beheben lässt

Wenn der Absatz eine Abschnittsüberschrift ist, verwenden Sie stattdessen ein Überschriftenelement (<h1>-<h6>).

Der Algorithmus

Ein <p>-Element enthält weniger als 50 Zeichen und ist entweder:

20 Pixel oder größer
16 Pixel oder größer und fett und/oder kursiv

Standards and Richtlinien

Weniger…

Das Widget "Button" enthält den Code aria-label="Open link in new tab/window"

Fehler: Visible label and accessible name do not match (Silktide)

What It Means

The accessible name of any interactive element should contain its visible text label.

Mehr…

Using two different names for a single page element can create a confusing user experience for assistive technology users.
For example, speech-input users may have difficulty activating a control if the label displayed on-screen does not match its accessible name.

Help Center: Opens in new tab:Visible label and accessible name do not match, explained
WCAG 2.2: Opens in new tab:Understanding Success Criterion 2.5.3: Label in Name
Siteimprove Alfa: Opens in new tab:Technical documentation for rule SIA-R14

Weniger…

Fehler: Sichtbares Label und zugänglicher Name stimmen nicht überein (Silktide)

Was das bedeutet

Der zugängliche Name jedes interaktiven Elements sollte seine sichtbare Textbeschriftung enthalten.

Mehr…

Die Verwendung zweier unterschiedlicher Namen für ein einzelnes Seitenelement kann für Benutzer unterstützender Technologien verwirrend sein.
Beispielsweise können Benutzer von Spracheingabesystemen Schwierigkeiten haben, ein Steuerelement zu aktivieren, wenn die auf dem Bildschirm angezeigte Bezeichnung nicht mit dem barrierefreien Namen übereinstimmt.

Help Center: Opens in new tab:Visible label and accessible name do not match, explained
WCAG 2.2: Opens in new tab:Understanding Success Criterion 2.5.3: Label in Name
Siteimprove Alfa: Opens in new tab:Technical documentation for rule SIA-R14

Weniger…

2. Widget "Sidebar-Icons"

Fehler: Redundant title text (WAVE)

Pro Icon (Mail, Telefon etc.) wird ein Fehler ausgegeben

What It Means

Title attribute text is the same as text or alternative text.

Mehr…

Why It Matters

Title attribute text is the same as text or alternative text.

Why It Matters

The title attribute value is used to provide advisory information. It typically appears when the users hovers the mouse over an element. The advisory information presented should not be identical to or very similar to the element text or alternative text.

How to Fix It

In most cases the title attribute can be removed, otherwise modify it to provide advisory, but not redundant information. Note that the title text may or may not be read by a screen reader and is typically inaccessible to sighted keyboard users.

The Algorithm... in English

A title attribute value is identical to element text or image alternative text.

Standards and Guidelines

none

Weniger…

Fehler: Überflüssiger Titeltext (WAVE)

Pro Icon (Mail, Telefon etc.) wird ein Fehler ausgegeben

Was das bedeutet

Der Text des Titelattributs ist identisch mit Text oder Alternativtext.

Mehr…

Warum das wichtig ist

Der Text des Titelattributs ist identisch mit Text oder Alternativtext.

Warum das wichtig ist

Der Wert des Titelattributs wird verwendet, um beratende Informationen bereitzustellen. Er wird normalerweise angezeigt, wenn der Benutzer mit der Maus über ein Element fährt. Die angezeigten beratenden Informationen sollten nicht mit dem Elementtext oder Alternativtext identisch oder sehr ähnlich sein.

Wie sich das beheben lässt

In den meisten Fällen kann das Titelattribut entfernt werden. Andernfalls können Sie es ändern, um beratende, aber keine redundanten Informationen bereitzustellen. Beachten Sie, dass der Titeltext möglicherweise von einem Bildschirmleseprogramm gelesen wird oder nicht und für sehende Tastaturbenutzer normalerweise nicht zugänglich ist.

Der Algorithmus

Der Wert eines Titelattributs ist identisch mit dem Elementtext oder dem alternativen Bildtext.

Standards and Richtlinien

keine

Weniger…

<a href="javascript:;" id="fancybox-right"><span class="fancy-ico" id="fancybox-right-ico"></span><span class="zp-sronly">
Nächstes Bild (next image)
</span></a>

3. Fancybox

Fehler: Redundant link (WAVE)

Betroffen ist "next image" nach "prev.image", was implementiert ist, auch wenn die "Richtungs-Buttons" nicht ausgewählt wurden

What It Means

Adjacent links go to the same URL.

Mehr…

Why It Matters

When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users.

How to Fix It

If possible, combine the redundant links into one link and remove any redundant text or alternative text (for example, if a product image and product name are in the same link, the image can usually be given alt="").

The Algorithm... in English

Two adjacent links go to the same URL.

Standards and Guidelines

2.4.4 Link Purpose (In Context) (Level A)

Weniger…

Fehler: Überflüssiger Link (WAVE)

Betroffen ist "next image" nach "prev.image", was implementiert ist, auch wenn die "Richtungs-Buttons" nicht ausgewählt wurden

Was das bedeutet

Benachbarte Links führen zur gleichen URL.

Mehr…

Warum das wichtig ist

Wenn nebeneinander liegende Links zur gleichen Stelle führen (wie etwa ein verlinktes Produktbild und ein nebeneinander liegendes verlinktes Produktname, die zur gleichen Produktseite führen), führt dies für Benutzer von Tastatur und Bildschirmleseprogramm zu zusätzlicher Navigation und Wiederholungen.

Wie sich das beheben lässt

Fassen Sie wenn möglich redundante Links zu einem Link zusammen und entfernen Sie redundanten Text oder Alternativtext (wenn sich beispielsweise ein Produktbild und ein Produktname im selben Link befinden, kann das Bild normalerweise mit alt="" versehen werden).

Der Algorithmus
Zwei nebeneinander liegende Links verweisen auf die gleiche URL.