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>
This commit is contained in:
parent
9b76767838
commit
de5cc38cee
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -28,9 +28,15 @@
|
||||||
error: 'FEHLER',
|
error: 'FEHLER',
|
||||||
warning: 'WARNUNG',
|
warning: 'WARNUNG',
|
||||||
excluded: 'AUSGESCHLOSSEN',
|
excluded: 'AUSGESCHLOSSEN',
|
||||||
info: 'INFO'
|
info: 'HINWEIS'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Nur bei diesen Status ergibt ein manueller Ausschluss Sinn (echte Probleme,
|
||||||
|
// die man als "geprüft und bewusst so gelassen" markieren will). "success"
|
||||||
|
// ist bereits in Ordnung, "info" (z.B. aria-hidden="true") ist bereits
|
||||||
|
// korrekt für Screenreader ausgeblendet – beide brauchen keinen Ausschluss-Klick.
|
||||||
|
const EXCLUDABLE_KINDS = { error: true, warning: true };
|
||||||
|
|
||||||
const BASE_LABEL_STYLE = {
|
const BASE_LABEL_STYLE = {
|
||||||
'font-family': 'sans-serif',
|
'font-family': 'sans-serif',
|
||||||
'font-size': 'small',
|
'font-size': 'small',
|
||||||
|
|
@ -327,7 +333,7 @@
|
||||||
removePreviousRun();
|
removePreviousRun();
|
||||||
const exclusions = loadExclusions();
|
const exclusions = loadExclusions();
|
||||||
const occurrenceCounts = new Map();
|
const occurrenceCounts = new Map();
|
||||||
const stats = { ok: 0, error: 0, warning: 0, excluded: 0, total: 0 };
|
const stats = { ok: 0, error: 0, warning: 0, info: 0, excluded: 0, total: 0 };
|
||||||
|
|
||||||
// Fehlerhafte Verwendung von alt auf Nicht-<img>-Elementen
|
// Fehlerhafte Verwendung von alt auf Nicht-<img>-Elementen
|
||||||
deepQueryAll('a[alt], button[alt], label[alt]', document, (el) => {
|
deepQueryAll('a[alt], button[alt], label[alt]', document, (el) => {
|
||||||
|
|
@ -381,11 +387,11 @@
|
||||||
} else if (isAriaHidden && !hasAccessibleName) {
|
} else if (isAriaHidden && !hasAccessibleName) {
|
||||||
// aria-hidden="true" entfernt das Element bereits vollständig aus dem
|
// aria-hidden="true" entfernt das Element bereits vollständig aus dem
|
||||||
// Accessibility-Tree – für Screenreader ist es so, als gäbe es kein
|
// Accessibility-Tree – für Screenreader ist es so, als gäbe es kein
|
||||||
// Bild. Das ist eine gültige Alternative zu alt="" bei dekorativen
|
// Bild. Das ist bereits der gewünschte Zustand (kein Fehler, keine
|
||||||
// Elementen (v.a. bei role="img" auf Nicht-<img>-Elementen), daher
|
// Warnung), daher nur ein Hinweis zur Information – und nicht
|
||||||
// hier keine Fehlermeldung, sondern dieselbe Einstufung wie alt="".
|
// ausschließbar, da es nichts zu "beheben" gibt.
|
||||||
segments = [linkPrefix, { code: 'aria-hidden="true"' }, ...extras];
|
segments = [linkPrefix, { code: 'aria-hidden="true"' }, ...extras];
|
||||||
kind = 'warning';
|
kind = 'info';
|
||||||
} else if (hasAccessibleName) {
|
} else if (hasAccessibleName) {
|
||||||
const resolvedName = hasAriaLabel ? img.getAttribute('aria-label') : (labelledBy || describedBy);
|
const resolvedName = hasAriaLabel ? img.getAttribute('aria-label') : (labelledBy || describedBy);
|
||||||
segments = [
|
segments = [
|
||||||
|
|
@ -403,19 +409,22 @@
|
||||||
|
|
||||||
stats[kind === 'success' ? 'ok' : kind] += 1;
|
stats[kind === 'success' ? 'ok' : kind] += 1;
|
||||||
|
|
||||||
|
const icon = kind === 'success' ? '✔' : kind === 'error' ? '✖' : kind === 'info' ? 'ℹ️' : '⚠️';
|
||||||
createLabel(img, kind, segments, {
|
createLabel(img, kind, segments, {
|
||||||
icon: kind === 'success' ? '✔' : kind === 'error' ? '✖' : '⚠️',
|
icon,
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
onClick: () => {
|
onClick: EXCLUDABLE_KINDS[kind]
|
||||||
|
? () => {
|
||||||
toggleExclusion(id);
|
toggleExclusion(id);
|
||||||
run();
|
run();
|
||||||
}
|
}
|
||||||
|
: undefined
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const summaryKind = stats.error > 0 ? 'error' : stats.warning > 0 ? 'warning' : 'success';
|
const summaryKind = stats.error > 0 ? 'error' : stats.warning > 0 ? 'warning' : 'success';
|
||||||
const summaryText = stats.total
|
const summaryText = stats.total
|
||||||
? `Bilder: ${stats.total} · ✔ ${stats.ok} OK · ✖ ${stats.error} Fehler · ⚠️ ${stats.warning} Warnung · ⦸ ${stats.excluded} ausgeschlossen`
|
? `Bilder: ${stats.total} · ✔ ${stats.ok} OK · ✖ ${stats.error} Fehler · ⚠️ ${stats.warning} Warnung · ℹ️ ${stats.info} Hinweis · ⦸ ${stats.excluded} ausgeschlossen`
|
||||||
: 'Keine Bilder auf dieser Seite gefunden.';
|
: 'Keine Bilder auf dieser Seite gefunden.';
|
||||||
|
|
||||||
createLabel(document.body, stats.total ? summaryKind : 'info', summaryText, {
|
createLabel(document.body, stats.total ? summaryKind : 'info', summaryText, {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue