saschabach
/
altchecker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
8 Commits 2 Branches 0 Tags 59 KiB
JavaScript 90%
HTML 10%
Go to file
Sascha f9cfa1c91e Fix labels becoming unclickable behind page overlays 
Labels were inserted as normal DOM siblings with z-index set but
position left as the default "static" - z-index has no effect on
non-positioned elements, so any ancestor that establishes its own
stacking context (e.g. a position:relative logo wrapper with a
hover/link overlay, common in component libraries like Salesforce
LWC/SLDS) could paint over the label and swallow clicks intended for
it. Labels now get a real position:absolute anchored to the target
element's viewport position and are appended directly to
document.body, escaping any ancestor stacking context while still
scrolling correctly with the page.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
 		2026-07-13 11:56:15 +02:00
.claude Initial commit 2026-07-13 10:40:23 +02:00
dist Fix labels becoming unclickable behind page overlays 2026-07-13 11:56:15 +02:00
src Fix labels becoming unclickable behind page overlays 2026-07-13 11:56:15 +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.