Geben Sie diesen Link an die Person weiter, die Ihre Website betreut: Die Fehler sind vom schwersten zum leichtesten geordnet, mit Fundstelle und Lösung.
Speichern Sie diesen Link: Er ist Ihr Zugang zum Bericht. Teilen Sie ihn nur mit Personen, die ihn sehen sollen.
Kurz gesagt
Für Entscheider, in einer Minute.
Stand: Es gibt Dinge, die ein Screenreader nicht benennen kann oder die sich ohne Maus nicht nutzen lassen; beginnen Sie damit.
Risiko: Wenn die Website an Verbraucher verkauft oder Dienstleistungen für sie erbringt (Onlinehandel, Bankdienstleistungen, Personenverkehr…), muss sie nach dem BFSG barrierefrei sein, außer die Dienstleistung wird von einem Kleinstunternehmen erbracht, und wir haben keine Informationen zur Barrierefreiheit der Website gefunden. Verbraucher können bei der Marktüberwachungsbehörde (MLBF) beantragen, dass sie einschreitet (§ 32 BFSG), oder ein Schlichtungsverfahren einleiten (§ 34 BFSG), und die Behörde kann Maßnahmen anordnen und Bußgelder verhängen. Wenn das auf Sie zutrifft, lassen Sie sich beraten.
Als Erstes: Schaltflächen ohne Namen (Menü, Suche, Schließen…), die sich mit einem Screenreader nicht benutzen lassen.
Was zu tun ist: Diesen Bericht an die Person weitergeben, die die Website betreut, die Fehler in der angegebenen Reihenfolge beheben und die Erklärung veröffentlichen.
Bevor Sie anfangen
Das Gesetz verweist auf technische Normen zur Barrierefreiheit, die auf einer Liste von Richtlinien namens WCAG beruhen (die maßgebliche Norm, EN 301 549, übernimmt die Version 2.1, Stufe AA, und wir ergänzen das Neue aus 2.2, das sich messen lässt, etwa die Größe von Schaltflächen). Eine Maschine kann etwa ein Drittel dieser Liste prüfen, und genau das misst dieser Bericht.
Den Rest muss ein Mensch prüfen: zum Beispiel, ob sich die ganze Website nur mit der Tastatur bedienen lässt, ob sie in einer logischen Reihenfolge gelesen wird oder ob die Bildbeschreibungen etwas Nützliches sagen.
Zuerst kommen die Fehler, die die Nutzung der Website verhindern, dann der Rest, vom schwersten zum leichtesten. Bei jedem finden Sie, was er bedeutet, wie man ihn behebt und Beispiele aus Ihrer eigenen Website. Was wir messen und was nicht.
So beginnt Ihre Startseite für alle, die sie nicht sehen
«Link: Café de Muestra, inicio.»
«Link: Shop.»
«Link: Cafés.»
«Link: About us.»
«Link: Contacto.»
«Schalter: Buscar.»
«Schalter: Carrito.»
«Grafik: Taza de café recién hecho. Recién tostado cada lunes.»
«Schalter: ‹.»
«Schalter: ›.»
«Link: IMG_2034.jpg.»
«Link: Leer más.»
Die ersten Links, Schaltflächen und Bilder, so wie ein Screenreader sie nennt (er liest außerdem die Texte und Überschriften dazwischen vor). Jedes „ohne Namen“ ist etwas, das jemand, der den Bildschirm nicht sieht, nicht benutzen kann.
Die Website nur mit der Tastatur bedienen
Viele Menschen benutzen keine Maus: blinde Menschen, Menschen mit eingeschränkter Beweglichkeit der Hände oder solche, die mit einem Taster navigieren. Wir haben Ihre Seiten mit der Tab-Taste durchlaufen, so wie sie es tun würden.
Startseite
https://cafedemuestra.example/
·Empfehlung: Empfehlung: Es gibt keinen Link „Zum Inhalt springen“. Die Seite hat eine andere Möglichkeit, das Menü zu überspringen (ausgezeichnete Bereiche), aber ein Link ganz am Anfang hilft Tastaturnutzern sehr.
✓In Ordnung: In Ordnung: Wir haben keine Stellen gefunden, an denen der Fokus gefangen bleibt.
✗Fehler: Fehler: Bei 15 oder mehr Elementen ist nicht zu sehen, wo der Fokus ist. Wer die Tastatur benutzt, verliert die Orientierung. Lösung: den Fokusrahmen nicht entfernen (outline: none) oder durch einen anderen, gut sichtbaren ersetzen.
✓In Ordnung: In Ordnung: Der Fokus landet nicht auf verborgenen Elementen.
✗Fehler: Fehler: 1 Element lässt sich mit der Maus anklicken, aber nicht mit der Tastatur bedienen, zum Beispiel: «Ver ofertas». Lösung: echte Schaltflächen und Links verwenden (<button>, <a href>) statt <div> oder <span> mit Klick.
Ohne sichtbaren Fokus, zum Beispiel: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Seite /producto.html
https://cafedemuestra.example/producto.html
·Empfehlung: Empfehlung: Es gibt keinen Link „Zum Inhalt springen“. Die Seite hat eine andere Möglichkeit, das Menü zu überspringen (ausgezeichnete Bereiche), aber ein Link ganz am Anfang hilft Tastaturnutzern sehr.
✓In Ordnung: In Ordnung: Wir haben keine Stellen gefunden, an denen der Fokus gefangen bleibt.
✗Fehler: Fehler: Bei 13 Elementen ist nicht zu sehen, wo der Fokus ist. Wer die Tastatur benutzt, verliert die Orientierung. Lösung: den Fokusrahmen nicht entfernen (outline: none) oder durch einen anderen, gut sichtbaren ersetzen.
✓In Ordnung: In Ordnung: Der Fokus landet nicht auf verborgenen Elementen.
✓In Ordnung: In Ordnung: Wir haben nichts gefunden, das sich mit der Maus anklicken, aber nicht mit der Tastatur bedienen lässt (Selbstgebautes wie Menüs oder Karussells sollte man von Hand testen).
Ohne sichtbaren Fokus, zum Beispiel: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Seite /contacto.html
https://cafedemuestra.example/contacto.html
·Empfehlung: Empfehlung: Es gibt keinen Link „Zum Inhalt springen“. Die Seite hat eine andere Möglichkeit, das Menü zu überspringen (ausgezeichnete Bereiche), aber ein Link ganz am Anfang hilft Tastaturnutzern sehr.
✓In Ordnung: In Ordnung: Wir haben keine Stellen gefunden, an denen der Fokus gefangen bleibt.
✗Fehler: Fehler: Bei 12 Elementen ist nicht zu sehen, wo der Fokus ist. Wer die Tastatur benutzt, verliert die Orientierung. Lösung: den Fokusrahmen nicht entfernen (outline: none) oder durch einen anderen, gut sichtbaren ersetzen.
✓In Ordnung: In Ordnung: Der Fokus landet nicht auf verborgenen Elementen.
✓In Ordnung: In Ordnung: Wir haben nichts gefunden, das sich mit der Maus anklicken, aber nicht mit der Tastatur bedienen lässt (Selbstgebautes wie Menüs oder Karussells sollte man von Hand testen).
Ohne sichtbaren Fokus, zum Beispiel: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Die Bilder, eins nach dem anderen
Wir haben 6 Bilder Ihrer Website einzeln geprüft und jedes mit seiner Beschreibung verglichen.
3 haben keine brauchbare Beschreibung. Hier ist unser Vorschlag: Prüfen Sie ihn und kopieren Sie ihn in das Attribut alt.
Die Vorschläge formuliert eine Maschine anhand des Bildes: Prüfen Sie sie, bevor Sie sie verwenden. Die Kommentare dieser Prüfung sind in der Sprache verfasst, in der die Analyse angefordert wurde (Español).
Beschreibung unbrauchbar
Es un nombre de archivo y no dice qué producto es.
Jetzt: alt="IMG_2034.jpg"
Vorschlag: alt="Bolsa de café de Colombia Huila, 250 gramos"
Ohne Beschreibung
No tiene texto alternativo y muestra un producto.
Jetzt: ohne alt-Attribut
Vorschlag: alt="Bolsa de café de Etiopía Yirgacheffe, 250 gramos"
Beschreibung unbrauchbar
La palabra «foto» no explica qué producto se muestra.
Jetzt: alt="foto"
Vorschlag: alt="Bolsa de café descafeinado por proceso de agua, 250 gramos"
Und 3 Bilder mit guter Beschreibung.
Was Ihre Schaltflächen und Links sagen
Wer einen Screenreader nutzt, hört den Namen jeder Schaltfläche und jedes Links. Wir haben die 23 geprüft, die auf Ihren Seiten vorkommen.
11 sind schwer verständlich: in einer anderen Sprache, mit Fachjargon, wiederholt oder ohne Angabe, wohin sie führen. Lösung: den Text oder das aria-label durch unseren Vorschlag ersetzen. Die Kommentare dieser Prüfung sind in der Sprache verfasst, in der die Analyse angefordert wurde (Español).
Andere Sprache · Link
Jetzt hört man: „Shop“ (3 Mal). Está en inglés y la página en español.
Vorschlag: „Inicio“
Andere Sprache · Link
Jetzt hört man: „About us“ (3 Mal). Está en inglés y lleva a la página de contacto.
Vorschlag: „Contacto“
Sagt nicht, wohin er führt · Schalter
Jetzt hört man: „‹“. Un símbolo no dice qué hace el botón.
Vorschlag: „Anterior“
Sagt nicht, wohin er führt · Schalter
Jetzt hört man: „›“. Un símbolo no dice qué hace el botón.
Vorschlag: „Siguiente“
Fachjargon · Link
Jetzt hört man: „IMG_2034.jpg“. Es el nombre de un archivo, no dice adónde lleva.
Vorschlag: „[Destino del enlace]“
Sagt nicht, wohin er führt · Link
Jetzt hört man: „Leer más“ (4 Mal). No dice qué se va a leer.
Vorschlag: „Leer más sobre nuestros cafés“
Sagt nicht, wohin er führt · Link
Jetzt hört man: „foto“. No dice qué muestra ni adónde lleva.
Vorschlag: „[Descripción de la foto y destino]“
Andere Sprache · Schalter
Jetzt hört man: „Subscribe“ (3 Mal). Está en inglés y la página en español.
Vorschlag: „Suscribirme“
Andere Sprache · Schalter
Jetzt hört man: „Add to cart“. Está en inglés y la página en español.
Vorschlag: „Añadir al carrito“
Sagt nicht, wohin er führt · Link
Jetzt hört man: „Click here“. Está en inglés y no dice adónde lleva.
Vorschlag: „Volver a la página de inicio“
Andere Sprache · Schalter
Jetzt hört man: „Send“. Está en inglés y la página en español.
Vorschlag: „Enviar mensaje“
Links, die nicht sagen, wohin sie führen
Mit Screenreadern kann man von Link zu Link springen. Wenn zehn Links „Weiterlesen“ heißen, weiß die Person nicht, welcher welcher ist. Lösung: Der Text sollte das Ziel nennen („Mehr zum Versand“), oder man ergänzt ein aria-label.
«Leer más» · 4 Mal
«Click here» · 1 Mal
Erklärung zur Barrierefreiheit
Wir haben sie nicht gefunden. Unternehmen, die unter das BFSG fallen, müssen in ihren Allgemeinen Geschäftsbedingungen oder auf andere deutlich wahrnehmbare Weise und in barrierefreier Form Informationen zur Barrierefreiheit bereitstellen: wie ihre Dienstleistung die Barrierefreiheitsanforderungen erfüllt, einschließlich der zuständigen Marktüberwachungsbehörde (§ 14 und Anlage 3 BFSG); üblich ist eine Seite „Barrierefreiheit“, die in der Fußzeile verlinkt ist. Öffentliche Stellen müssen außerdem eine Erklärung zur Barrierefreiheit veröffentlichen, die angibt, wie weit sie die Anforderungen erfüllen, welche Inhalte nicht barrierefrei sind, wann das bewertet wurde und wie man ein Problem melden kann, und die von allen Seiten aus verlinkt ist.
Hier ist ein Entwurf mit den Daten aus diesem Bericht. Ergänzen Sie, was in eckigen Klammern steht, prüfen Sie, ob alles stimmt, und veröffentlichen Sie ihn.
Bevor Sie sie veröffentlichen, sollte ein Mensch prüfen, was dieser Bericht nicht abdeckt: vollständige Abläufe (suchen, kaufen, registrieren, bezahlen), Fehlermeldungen in Formularen, Pop-ups, Videos und herunterladbare Dokumente. Werden weitere Fehler gefunden, ergänzen Sie sie in der Liste.
Achtung: Wenn Ihre Dienstleistung unter das BFSG fällt und die Anforderungen nicht erfüllt, müssen Sie das korrigieren und unverzüglich die zuständige Marktüberwachungsbehörde informieren (§ 14 Abs. 4 BFSG). Lassen Sie sich vor der Veröffentlichung beraten.
Ihr Entwurf: Erklärung zur Barrierefreiheit
[Name Ihres Unternehmens] verpflichtet sich, seine Website cafedemuestra.example im Einklang mit dem Barrierefreiheitsstärkungsgesetz (BFSG) barrierefrei zu gestalten. Als technische Grundlage dient die Norm EN 301 549, die die WCAG 2.1 (Konformitätsstufe AA) übernimmt; wir haben auch die neuen Kriterien der WCAG 2.2 geprüft.
Beschreibung der Dienstleistung
[Beschreiben Sie kurz Ihre Dienstleistung, wie sie erbracht wird und wie sie sich mit Screenreader, Tastatur oder Vergrößerung nutzen lässt.]
[Vor der Veröffentlichung von einer Fachperson zu prüfen.]
Stand der Vereinbarkeit
Diese Website ist mit den WCAG 2.1, Konformitätsstufe AA, nicht vereinbar, aus den unten genannten Gründen.
Nicht barrierefreie Inhalte
Schaltflächen ohne Namen (Menü, Suche, Schließen…), die sich mit einem Screenreader nicht benutzen lassen.
Formularfelder ohne Beschriftung: Wer einen Screenreader nutzt, weiß nicht, was er eingeben soll.
Leere Links: Ein blinder Mensch hört „Link“, ohne zu wissen, wohin er führt.
Die Website verhindert das Vergrößern mit den Fingern auf dem Smartphone.
Felder, deren einziger Name der Beispieltext darin ist: Er verschwindet beim Tippen, und manche Screenreader lesen ihn gar nicht vor.
Bilder ohne Beschreibung: Ein Screenreader weiß nicht, was sie zeigen.
Einige Bilder haben keine passende Beschreibung.
Einige Schaltflächen und Links haben Namen, die mit einem Screenreader nicht verständlich sind.
Bei einigen Elementen ist beim Navigieren mit der Tastatur nicht zu sehen, wo der Fokus ist.
Es gibt Elemente, die sich mit der Maus anklicken, aber nicht mit der Tastatur bedienen lassen.
Wir arbeiten daran, dies bis zum [voraussichtliches Datum] zu beheben.
Erstellung dieser Erklärung
Erklärung erstellt am 2026-11-01 durch Selbstbewertung: automatische Analyse nach WCAG 2.2 A und AA, automatisierte Tests der Tastaturbedienung und automatisierte Prüfung der Bilder und der Namen von Schaltflächen und Links[, sowie manuelle Prüfung von …].
Anmerkungen und Kontaktdaten
Wenn Sie auf ein Problem mit der Barrierefreiheit stoßen oder die Informationen in einem anderen Format brauchen, schreiben Sie uns an [E-Mail] oder rufen Sie uns an unter [Telefon]. Wir antworten innerhalb von höchstens [Frist: bei Bundesbehörden höchstens ein Monat (§ 12b BGG); bei Unternehmen die von Ihnen festgelegte Frist].
Beschwerdemöglichkeiten
Wenn Sie meinen, dass diese Dienstleistung die Barrierefreiheitsanforderungen nicht erfüllt, können Sie bei der zuständigen Marktüberwachungsbehörde, der Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF), beantragen, dass sie Maßnahmen ergreift (§ 32 BFSG), oder ein Schlichtungsverfahren bei der Schlichtungsstelle nach § 16 BGG einleiten (§ 34 BFSG).
Die Fehler, einer nach dem anderen
1. Schaltflächen ohne Namen (Menü, Suche, Schließen…), die sich mit einem Screenreader nicht benutzen lassen
Kritisch · 1 Element auf 1 von 3 Seiten · Regel button-name
So beheben Sie es. Jeder Schaltfläche einen Namen geben: sichtbaren Text oder aria-label ("In den Warenkorb", "Schließen", "Suchen").
5. Felder, deren einziger Name der Beispieltext darin ist
Er verschwindet beim tippen, und manche screenreader lesen ihn gar nicht vor.
Schwerwiegend · 6 Elemente auf 3 von 3 Seiten · Regel wa-placeholder
So beheben Sie es. Jedem Feld ein sichtbares <label> geben (oder, wenn es nicht sichtbar sein kann, ein aria-label). Der Platzhalter kann als Beispiel bleiben, ersetzt aber nicht die Beschriftung.
Kritisch · 1 Element auf 1 von 3 Seiten · Regel image-alt
So beheben Sie es. Jedem <img> ein alt-Attribut geben, das beschreibt, was das Bild beiträgt (z. B. alt="Blauer Laufschuh, Seitenansicht"). Ist es nur dekorativ, ein leeres alt="".
7. Texte mit wenig Kontrast, schwer lesbar für Menschen mit Sehbehinderung
Schwerwiegend · 13 Elemente auf 3 von 3 Seiten · Regel color-contrast
So beheben Sie es. Den Text dunkler oder den Hintergrund heller machen, bis ein Kontrast von 4,5:1 erreicht ist (3:1 bei großem Text). Im Bericht steht jedes Farbpaar, das den Wert nicht erreicht.
https://cafedemuestra.example/Code: Code: <p class="promo">Envío gratis a partir de 35 € · Tostamos cada lunes en pequeños lotes</p>Text #9a8775 auf Hintergrund #fffaf2: Kontrast 3.31:1, nötig sind 4.5:1.
https://cafedemuestra.example/Code: Code: <p class="precio">12,90 €</p>Text #a08b78 auf Hintergrund #fffaf2: Kontrast 3.12:1, nötig sind 4.5:1.
https://cafedemuestra.example/producto.htmlCode: Code: <p class="precio">12,90 €</p>Text #a08b78 auf Hintergrund #fffaf2: Kontrast 3.12:1, nötig sind 4.5:1.
https://cafedemuestra.example/contacto.htmlCode: Code: <p class="promo">Respondemos en menos de 24 horas laborables.</p>Text #9a8775 auf Hintergrund #fffaf2: Kontrast 3.31:1, nötig sind 4.5:1.
8. Schaltflächen oder Links, die zu klein sind oder zu dicht beieinanderliegen, um sie mit dem Finger zu treffen
Schwerwiegend · 3 Elemente auf 1 von 3 Seiten · Regel target-size
So beheben Sie es. Jede klickbare Fläche sollte mindestens 24×24 Pixel groß sein oder genug freien Raum um sich herum haben, um dieses Maß zu erreichen (WCAG 2.2).
https://cafedemuestra.example/ (auf dem Smartphone)Code: Code: <a href="contacto.html">Contacto</a>
9. Die Seite ragt beim Vergrößern oder auf einem kleinen Smartphone rechts heraus
Wer den text vergrößert, muss in jeder zeile seitlich scrollen.
Schwerwiegend · 1 Element auf 1 von 3 Seiten · Regel wa-reflow
So beheben Sie es. Das Layout an 320 px Breite anpassen: keine festen Breiten in Pixeln, Bilder mit max-width: 100 % und breite Tabellen oder Blöcke mit eigenem Bildlauf.
https://cafedemuestra.example/ (auf dem Smartphone)Code: Code: <html> (die Seite ragt bei 320 px rechts über den Bildschirm hinaus)
10. Überschriften, die Ebenen überspringen
Der screenreader erweckt den eindruck, dass ein teil der seite fehlt.
Mittel · gute Praxis · 1 Element auf 1 von 3 Seiten · Regel heading-order
So beheben Sie es. Überschriften der Reihe nach verwenden (<h1>, dann <h2>, <h3>…), ohne Ebenen zu überspringen; die Größe ändert man per CSS, nicht über die Ebene.
Die Zeilen „Startseite auf dem Smartphone“ und „mit dem Cookie-Banner“ sind dieselbe Startseite, anders betrachtet, keine verschiedenen Seiten.
Wenn Sie Fragen zu einem Fehler haben, schreiben Sie uns an soporte@sintropiezos.com, und wir helfen Ihnen. Sin Tropiezos, ein Dienst von BLASAI Software S.L.U.
