commit ba3d2c88e893850ef29be8c0a89af583169b5d16 Author: Sascha Date: Mon Jul 13 10:40:23 2026 +0200 Initial commit Co-Authored-By: Claude Sonnet 5 diff --git a/.claude/launch.json b/.claude/launch.json new file mode 100644 index 0000000..886e242 --- /dev/null +++ b/.claude/launch.json @@ -0,0 +1,11 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "static", + "runtimeExecutable": "python", + "runtimeArgs": ["-m", "http.server", "8934"], + "port": 8934 + } + ] +} diff --git a/INSTALLIEREN.html b/INSTALLIEREN.html new file mode 100644 index 0000000..49109a0 --- /dev/null +++ b/INSTALLIEREN.html @@ -0,0 +1,111 @@ + + + + + Alt-Text Checker – Installationsanleitung + + + + +

Alt-Text Checker

Barrierefreiheits-Bookmarklet – Installationsanleitung

+ +

1. Bookmarklet installieren

Ziehe den folgenden Link per Drag & Drop in deine Lesezeichenleiste (Favoritenleiste):

+ +

+ Alt-Text Checker +

+ +

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

+ +

+
Falls Drag & Drop nicht funktioniert: Lesezeichen manuell anlegen (Rechtsklick auf Lesezeichenleiste → „Seite hinzufügen" o.ä.), als Namen „Alt-Text Checker" und als Adresse den Link-Code aus dist/bookmarklet.txt eintragen.
+

+ +

2. Bookmarklet benutzen

Ö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: Du hast dieses Bild 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 deines 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.

/ gesetzt – niemals per innerHTML.
+  function buildFragment(segments) {
+    const frag = document.createDocumentFragment();
+    segments.forEach((seg) => {
+      if (typeof seg === 'string') {
+        frag.appendChild(document.createTextNode(seg));
+      } else if (seg.code !== undefined) {
+        const code = document.createElement('code');
+        code.textContent = seg.code;
+        frag.appendChild(code);
+      } else if (seg.strike !== undefined) {
+        const s = document.createElement('s');
+        s.textContent = seg.strike;
+        frag.appendChild(s);
+      }
+    });
+    return frag;
+  }
+
+  // ---------------------------------------------------------------------
+  // Label-Erstellung (Badge neben dem geprüften Element)
+  // ---------------------------------------------------------------------
+
+  // content: bei opts.global ein reiner String (von uns generiert),
+  //          sonst ein Array von Segmenten für buildFragment().
+  function createLabel(el, kind, content, opts) {
+    opts = opts || {};
+    const colors = COLORS[kind];
+    const isGlobal = !!opts.global;
+
+    const wrapper = document.createElement(isGlobal ? 'label' : 'button');
+    wrapper.className = `${NS} ${NS}-${kind}`.trim();
+
+    const style = Object.assign({}, BASE_LABEL_STYLE, {
+      'background-color': colors.bg,
+      'outline-color': colors.outline,
+      color: colors.text
+    });
+
+    if (opts.position === 'absolute' && el.offsetParent && el.offsetParent !== document.body) {
+      style.left = `${el.offsetLeft}px`;
+      style.top = `${el.offsetTop}px`;
+    }
+    if (opts.extraStyle) Object.assign(style, opts.extraStyle);
+
+    wrapper.setAttribute('style', styleToString(style));
+
+    const icon = opts.icon || '';
+    if (isGlobal) {
+      wrapper.textContent = icon ? `${icon} ${content}` : content;
+    } else {
+      wrapper.appendChild(document.createTextNode(icon));
+
+      const badge = document.createElement('span');
+      badge.className = `${NS}-badge`;
+      badge.textContent = BADGE_TEXT[kind] || '';
+      badge.style.marginLeft = '4px';
+      badge.style.fontWeight = '700';
+      wrapper.appendChild(badge);
+
+      const details = document.createElement('span');
+      details.className = `${NS}-details`;
+      details.appendChild(buildFragment(content));
+      details.style.color = 'inherit';
+      details.style.marginLeft = '4px';
+      wrapper.appendChild(details);
+
+      if (!opts.alwaysOpen) {
+        details.style.display = 'none';
+        const show = () => {
+          if (document.querySelectorAll(`.${NS}-toggle:checked`).length === 0) {
+            details.style.display = 'inline';
+          }
+        };
+        const hide = () => {
+          if (document.querySelectorAll(`.${NS}-toggle:checked`).length === 0) {
+            details.style.display = 'none';
+          }
+        };
+        wrapper.addEventListener('focus', show);
+        wrapper.addEventListener('mouseover', show);
+        wrapper.addEventListener('blur', hide);
+        wrapper.addEventListener('mouseout', hide);
+      }
+    }
+
+    if (opts.onClick) {
+      wrapper.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        opts.onClick();
+      });
+    }
+
+    if (isGlobal && opts.withToggle) {
+      wrapper.appendChild(document.createTextNode(' — alle Details anzeigen'));
+      const checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.className = `${NS}-toggle`;
+      checkbox.style.margin = '0 0 0 4px';
+      checkbox.style.verticalAlign = 'baseline';
+      checkbox.addEventListener('change', function () {
+        document.querySelectorAll(`.${NS}-details`).forEach((d) => {
+          d.style.display = this.checked ? 'inline' : 'none';
+        });
+      });
+      wrapper.appendChild(checkbox);
+    }
+
+    if (isGlobal) {
+      document.querySelectorAll(`.${NS}-global`).forEach((n) => n.remove());
+      wrapper.className += ` ${NS}-global`;
+    }
+
+    if (opts.position === 'absolute' && el.parentNode) {
+      el.parentNode.insertBefore(wrapper, el.nextSibling);
+    } else {
+      (opts.insertInto || el.parentNode).appendChild(wrapper);
+    }
+
+    return wrapper;
+  }
+
+  // ---------------------------------------------------------------------
+  // Prüf-Logik: referenzierten Text auflösen (z.B. aria-describedby)
+  // ---------------------------------------------------------------------
+
+  // Gibt den (zusammengefügten) sichtbaren Text der referenzierten Elemente
+  // zurück, oder null falls das Attribut fehlt / nichts gefunden wurde.
+  // Markiert die referenzierten Elemente zusätzlich selbst auf der Seite.
+  function resolveIdRefs(attrName, imgEl) {
+    const value = imgEl.getAttribute(attrName);
+    if (!value) return null;
+
+    const ids = value.split(' ').map((s) => s.trim()).filter(Boolean);
+    const texts = [];
+
+    ids.forEach((id) => {
+      const ref = document.getElementById(id);
+      if (!ref) return;
+      createLabel(
+        ref,
+        'warning',
+        [`Referenziert von [${attrName}="`, { code: imgEl.id || '…' }, '"]'],
+        { icon: '⚠️', position: 'absolute' }
+      );
+      const refText = ref.textContent.trim();
+      if (refText) texts.push(refText);
+    });
+
+    return texts.length ? texts.join(' ') : null;
+  }
+
+  // ---------------------------------------------------------------------
+  // Hauptanalyse
+  // ---------------------------------------------------------------------
+
+  function run() {
+    removePreviousRun();
+    const exclusions = loadExclusions();
+    const stats = { ok: 0, error: 0, warning: 0, excluded: 0, total: 0 };
+
+    // Fehlerhafte Verwendung von alt auf Nicht--Elementen
+    deepQueryAll('a[alt], button[alt], label[alt]', document, (el) => {
+      createLabel(
+        el,
+        'error',
+        [`<${el.tagName.toLowerCase()}> mit ungültigem `, { code: `alt="${el.getAttribute('alt')}"` }],
+        { icon: '✖', position: 'absolute' }
+      );
+    });
+
+    deepQueryAll('img, [role="img"]', document, (img) => {
+      stats.total += 1;
+
+      if (isExcluded(img, exclusions)) {
+        stats.excluded += 1;
+        createLabel(img, 'excluded', ['Ausgeschlossen (manuell als dekorativ markiert)'], {
+          icon: '⦸',
+          position: 'absolute',
+          onClick: () => {
+            toggleExclusion(img);
+            run();
+          }
+        });
+        return;
+      }
+
+      const hasAlt = img.hasAttribute('alt');
+      const altValue = hasAlt ? img.getAttribute('alt') : null;
+      const hasAriaLabel = img.hasAttribute('aria-label');
+      const describedBy = resolveIdRefs('aria-describedby', img);
+      const labelledBy = resolveIdRefs('aria-labelledby', img);
+      const hasTitle = img.hasAttribute('title');
+      const hasLongdesc = img.hasAttribute('longdesc');
+      const hasAccessibleName = hasAriaLabel || describedBy !== null || labelledBy !== null;
+      const linkPrefix = isInsideLink(img) ? 'Bild in Link: ' : '';
+
+      const extras = [];
+      if (hasTitle) extras.push(' ', { code: `title="${img.getAttribute('title')}"` });
+      if (hasLongdesc) extras.push(' ', { code: `longdesc="${img.getAttribute('longdesc')}"` });
+
+      let segments;
+      let kind;
+
+      if (hasAlt) {
+        const isDecorative = altValue.trim().length === 0;
+        segments = [linkPrefix, { code: `alt="${altValue}"` }, ...extras];
+        kind = isDecorative ? 'warning' : 'success';
+      } else if (hasAccessibleName) {
+        const resolvedName = hasAriaLabel ? img.getAttribute('aria-label') : (labelledBy || describedBy);
+        segments = [
+          hasTitle ? '' : linkPrefix,
+          { strike: 'alt' },
+          ' fehlt, aber ARIA-Name vorhanden: ',
+          { code: resolvedName },
+          ...extras
+        ];
+        kind = 'warning';
+      } else {
+        segments = [linkPrefix, { strike: 'alt' }, ' fehlt', ...extras];
+        kind = 'error';
+      }
+
+      stats[kind === 'success' ? 'ok' : kind] += 1;
+
+      createLabel(img, kind, segments, {
+        icon: kind === 'success' ? '✔' : kind === 'error' ? '✖' : '⚠️',
+        position: 'absolute',
+        onClick: () => {
+          toggleExclusion(img);
+          run();
+        }
+      });
+    });
+
+    const summaryKind = stats.error > 0 ? 'error' : stats.warning > 0 ? 'warning' : 'success';
+    const summaryText = stats.total
+      ? `Bilder: ${stats.total} · ✔ ${stats.ok} OK · ✖ ${stats.error} Fehler · ⚠️ ${stats.warning} Warnung · ⦸ ${stats.excluded} ausgeschlossen`
+      : 'Keine Bilder auf dieser Seite gefunden.';
+
+    createLabel(document.body, stats.total ? summaryKind : 'info', summaryText, {
+      global: true,
+      withToggle: !!stats.total,
+      extraStyle: { position: 'fixed', top: '0', left: '0' }
+    });
+  }
+
+  run();
+})();
diff --git a/test/testseite.html b/test/testseite.html
new file mode 100644
index 0000000..98eb07c
--- /dev/null
+++ b/test/testseite.html
@@ -0,0 +1,40 @@
+
+
+
+  
+  Testseite – Alt-Text Checker
+  
+
+
+  Testseite für Alt-Text Checker
+
+  1. Bild ohne alt-Attribut (Fehler erwartet):
+  
+
+  2. Bild mit leerem alt (Warnung, dekorativ):
+  
+
+  3. Bild mit Alt-Text (OK):
+  
+
+  4. Bild mit aria-label statt alt (Warnung):
+  
+
+  5. Bild in einem Link:
+


+
+  6. Bild mit aria-describedby:
+  
+  Diese Beschreibung wird per aria-describedby referenziert.
+
+  7. Falsche Verwendung: alt auf einem Link statt auf dem Bild:
+  Link mit falschem alt-Attribut
+
+  8. Bild mit potenziell gefährlichem alt-Text (XSS-Test):
+  
+
+