Modifications based on the image-alt-text checker from tollwerk. Additionally from the inital use, I can exclude images from the overall check if reasonable.
Go to file
Sascha de5cc38cee Give aria-hidden its own non-excludable "info" status; make OK non-excludable too
aria-hidden="true" was sharing the "warning" bucket with real problems
(empty alt, ARIA-name-without-alt) even though it needs no action - the
element is already fully removed from the accessibility tree. It now
gets its own "info"/"Hinweis" kind with a dedicated badge, icon, and
summary count.

Exclusion only makes sense for things you'd want to mark as "reviewed,
intentionally left as-is": errors and real warnings. "success" and the
new "info" kind no longer get a click handler at all, since there is
nothing to exclude - clicking them is now a no-op.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-14 10:37:45 +02:00
.claude Initial commit 2026-07-13 10:40:23 +02:00
dist Give aria-hidden its own non-excludable "info" status; make OK non-excludable too 2026-07-14 10:37:45 +02:00
src Give aria-hidden its own non-excludable "info" status; make OK non-excludable too 2026-07-14 10:37:45 +02:00
test Fix exclusion grouping duplicate images together 2026-07-13 11:29:32 +02:00
.gitignore Fix exclusion for non-<img> elements with role="img" 2026-07-13 11:24:16 +02:00
README.md Replace INSTALLIEREN.html with README 2026-07-13 10:46:35 +02:00
build.js Initial commit 2026-07-13 10:40:23 +02:00
package-lock.json Fix exclusion for non-<img> elements with role="img" 2026-07-13 11:24:16 +02:00
package.json Fix exclusion for non-<img> elements with role="img" 2026-07-13 11:24:16 +02:00

README.md

Alt-Text Checker

Barrierefreiheits-Bookmarklet zur Prüfung von Alt-Texten auf beliebigen Webseiten.

Installation

Installationsseite mit Drag-&-Drop-Button: https://saschab.codeberg.page/altchecker/

Falls die Seite nicht erreichbar ist oder Drag & Drop nicht funktioniert, geht es auch manuell:

  1. Rechtsklick auf die Lesezeichenleiste deines Browsers → „Seite hinzufügen" o. ä.
  2. Als Namen Alt-Text Checker eintragen.
  3. Als Adresse den kompletten Inhalt von dist/bookmarklet.txt einfügen.
  4. Speichern.

Ist die Lesezeichenleiste nicht sichtbar? In Chrome/Edge/Firefox: Strg+Umschalt+B (Mac: Cmd+Umschalt+B).

Benutzung

  • Öffne eine beliebige Website.
  • Klicke in der Lesezeichenleiste auf „Alt-Text Checker".
  • Jedes Bild bekommt sofort ein kleines Label mit Status.
  • Erneuter Klick auf das Bookmarklet aktualisiert die Analyse (z. B. nach dem Scrollen zu neu geladenen Bildern).

Was bedeuten die Farben?

  • Rot Fehler: Kein alt-Attribut und kein ARIA-Ersatz. Screenreader können das Bild nicht beschreiben.
  • Orange Warnung: Leeres alt="" (dekorativ) oder nur über ARIA benannt statt über alt.
  • Grün OK: Alt-Text ist vorhanden und nicht leer.
  • Grau Ignoriert: Das Bild wurde manuell von der Prüfung ausgeschlossen (z. B. bewusst dekorativ).

Bild von Prüfung ausschließen

Klicke direkt auf das kleine Label neben einem Bild. Das Bild wird sofort als „ausgeschlossen" markiert. Erneuter Klick macht das rückgängig. Der Ausschluss wird im localStorage des Browsers pro Website-URL gespeichert und bleibt auch nach einem Neuladen der Seite erhalten.

Datenschutz

Das Bookmarklet führt reines JavaScript im Browser aus. Es werden keine Daten an externe Server gesendet die einzige Speicherung erfolgt lokal im localStorage des Browsers.