112 lines
12 KiB
HTML
112 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Alt-Text Checker – Installationsanleitung</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px 80px;
|
||
color: #24292f;
|
||
line-height: 1.6;
|
||
font-size: 16px;
|
||
}
|
||
h1 {
|
||
font-size: 2em;
|
||
font-weight: 600;
|
||
margin: 0 0 8px;
|
||
padding-bottom: 0.3em;
|
||
border-bottom: 1px solid #d0d7de;
|
||
}
|
||
h2 {
|
||
font-size: 1.4em;
|
||
font-weight: 600;
|
||
margin: 1.6em 0 0.6em;
|
||
padding-bottom: 0.3em;
|
||
border-bottom: 1px solid #d0d7de;
|
||
}
|
||
p, ul, ol {
|
||
margin: 0.6em 0;
|
||
}
|
||
ul, ol {
|
||
padding-left: 1.6em;
|
||
}
|
||
li {
|
||
margin: 0.2em 0;
|
||
}
|
||
a {
|
||
color: #0969da;
|
||
}
|
||
code {
|
||
background: #f6f8fa;
|
||
padding: 0.15em 0.4em;
|
||
border-radius: 4px;
|
||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||
font-size: 0.9em;
|
||
}
|
||
blockquote {
|
||
margin: 0.8em 0;
|
||
padding: 0 1em;
|
||
color: #57606a;
|
||
border-left: 3px solid #d0d7de;
|
||
}
|
||
blockquote p {
|
||
margin: 0.5em 0;
|
||
}
|
||
hr {
|
||
border: none;
|
||
border-top: 1px solid #d0d7de;
|
||
margin: 2em 0;
|
||
}
|
||
strong {
|
||
font-weight: 600;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Alt-Text Checker</h1>
|
||
<p>Barrierefreiheits-Bookmarklet – Installationsanleitung</p>
|
||
|
||
<h2>1. Bookmarklet installieren</h2>
|
||
<p>Ziehe den folgenden Link per Drag & Drop in deine Lesezeichenleiste (Favoritenleiste):</p>
|
||
|
||
<p style="text-align:center; margin: 1.5em 0;">
|
||
<a id="bookmarklet-link" href="javascript:!function()%7B%22use%20strict%22%3Bconst%20e%3D%22atc%22%2Ct%3D%7Bsuccess%3A%7Bbg%3A%22lime%22%2Coutline%3A%22%23000%22%2Ctext%3A%22%23000%22%7D%2Cerror%3A%7Bbg%3A%22%23EB0000%22%2Coutline%3A%22%23fff%22%2Ctext%3A%22%23fff%22%7D%2Cwarning%3A%7Bbg%3A%22orange%22%2Coutline%3A%22%23000%22%2Ctext%3A%22%23000%22%7D%2Cexcluded%3A%7Bbg%3A%22%23e0e0e0%22%2Coutline%3A%22%23666%22%2Ctext%3A%22%23333%22%7D%2Cinfo%3A%7Bbg%3A%22yellow%22%2Coutline%3A%22%23000%22%2Ctext%3A%22%23000%22%7D%7D%2Cn%3D%7Bsuccess%3A%22OK%22%2Cerror%3A%22FEHLER%22%2Cwarning%3A%22WARNUNG%22%2Cexcluded%3A%22AUSGESCHLOSSEN%22%2Cinfo%3A%22INFO%22%7D%2Co%3D%7B%22font-family%22%3A%22sans-serif%22%2C%22font-size%22%3A%22small%22%2Cpadding%3A%225px%208px%22%2Coutline%3A%222px%20dotted%20%23000%22%2C%22outline-offset%22%3A%22-3px%22%2Cborder%3A%220%22%2Ccursor%3A%22default%22%2C%22z-index%22%3A%222147483647%22%7D%3Bfunction%20l()%7Breturn%22alt-text-checker%3Aexcluded%3A%22%2Blocation.href%7Dfunction%20r()%7Btry%7Bconst%20e%3DlocalStorage.getItem(l())%3Breturn%20e%3FJSON.parse(e)%3A%5B%5D%7Dcatch(e)%7Breturn%5B%5D%7D%7Dfunction%20i(e)%7Bif(%22IMG%22%3D%3D%3De.tagName)return%20e.currentSrc%7C%7Ce.src%7C%7Cnull%3Bconst%20t%3De.closest%3Fe.closest(%22a%5Bhref%5D%22)%3Anull%3Bif(t%26%26t.href)return%60role-img%3A%24%7Bt.href%7D%60%3Bconst%20n%3De.getAttribute(%22aria-label%22)%3Breturn%20n%3F%60role-img%3A%24%7Bn%7D%60%3Anull%7Dfunction%20a(e)%7Bconst%20t%3Di(e)%3Bif(null%3D%3D%3Dt)return%3Bconst%20n%3Dr()%2Co%3Dn.indexOf(t)%3B-1%3D%3D%3Do%3Fn.push(t)%3An.splice(o%2C1)%2Cfunction(e)%7Btry%7BlocalStorage.setItem(l()%2CJSON.stringify(e))%7Dcatch(e)%7B%7D%7D(n)%7Dfunction%20c(e%2Ct%2Cn)%7Blet%20o%3D0%3Breturn%20Array.from((t%7C%7Cdocument).querySelectorAll(e)).forEach(e%3D%3E%7Bn(e)%2Co%2B%3D1%7D)%2CArray.from((t%7C%7Cdocument).querySelectorAll(%22*%22)).forEach(t%3D%3E%7Bt.shadowRoot%26%26(o%2B%3Dc(e%2Ct.shadowRoot%2Cn))%7D)%2Co%7Dfunction%20s(e)%7Breturn!(!e.parentNode%7C%7C%22A%22!%3D%3De.parentNode.tagName%26%26!s(e.parentNode))%7Dfunction%20u(l%2Cr%2Ci%2Ca)%7Bconst%20c%3Dt%5Br%5D%2Cs%3D!!(a%3Da%7C%7C%7B%7D).global%2Cu%3Ddocument.createElement(s%3F%22label%22%3A%22button%22)%3Bu.className%3D%60%24%7Be%7D%20%24%7Be%7D-%24%7Br%7D%60.trim()%3Bconst%20d%3DObject.assign(%7B%7D%2Co%2C%7B%22background-color%22%3Ac.bg%2C%22outline-color%22%3Ac.outline%2Ccolor%3Ac.text%7D)%3Bvar%20f%3B%22absolute%22%3D%3D%3Da.position%26%26l.offsetParent%26%26l.offsetParent!%3D%3Ddocument.body%26%26(d.left%3D%60%24%7Bl.offsetLeft%7Dpx%60%2Cd.top%3D%60%24%7Bl.offsetTop%7Dpx%60)%2Ca.extraStyle%26%26Object.assign(d%2Ca.extraStyle)%2Cu.setAttribute(%22style%22%2C(f%3Dd%2CObject.keys(f).map(e%3D%3E%60%24%7Be%7D%3A%24%7Bf%5Be%5D%7D%60).join(%22%3B%22)))%3Bconst%20g%3Da.icon%7C%7C%22%22%3Bif(s)u.textContent%3Dg%3F%60%24%7Bg%7D%20%24%7Bi%7D%60%3Ai%3Belse%7Bu.appendChild(document.createTextNode(g))%3Bconst%20t%3Ddocument.createElement(%22span%22)%3Bt.className%3D%60%24%7Be%7D-badge%60%2Ct.textContent%3Dn%5Br%5D%7C%7C%22%22%2Ct.style.marginLeft%3D%224px%22%2Ct.style.fontWeight%3D%22700%22%2Cu.appendChild(t)%3Bconst%20o%3Ddocument.createElement(%22span%22)%3Bif(o.className%3D%60%24%7Be%7D-details%60%2Co.appendChild(function(e)%7Bconst%20t%3Ddocument.createDocumentFragment()%3Breturn%20e.forEach(e%3D%3E%7Bif(%22string%22%3D%3Dtypeof%20e)t.appendChild(document.createTextNode(e))%3Belse%20if(void%200!%3D%3De.code)%7Bconst%20n%3Ddocument.createElement(%22code%22)%3Bn.textContent%3De.code%2Ct.appendChild(n)%7Delse%20if(void%200!%3D%3De.strike)%7Bconst%20n%3Ddocument.createElement(%22s%22)%3Bn.textContent%3De.strike%2Ct.appendChild(n)%7D%7D)%2Ct%7D(i))%2Co.style.color%3D%22inherit%22%2Co.style.marginLeft%3D%224px%22%2Cu.appendChild(o)%2C!a.alwaysOpen)%7Bo.style.display%3D%22none%22%3Bconst%20t%3D()%3D%3E%7B0%3D%3D%3Ddocument.querySelectorAll(%60.%24%7Be%7D-toggle%3Achecked%60).length%26%26(o.style.display%3D%22inline%22)%7D%2Cn%3D()%3D%3E%7B0%3D%3D%3Ddocument.querySelectorAll(%60.%24%7Be%7D-toggle%3Achecked%60).length%26%26(o.style.display%3D%22none%22)%7D%3Bu.addEventListener(%22focus%22%2Ct)%2Cu.addEventListener(%22mouseover%22%2Ct)%2Cu.addEventListener(%22blur%22%2Cn)%2Cu.addEventListener(%22mouseout%22%2Cn)%7D%7Dif(a.onClick%26%26u.addEventListener(%22click%22%2Ce%3D%3E%7Be.preventDefault()%2Ce.stopPropagation()%2Ca.onClick()%7D)%2Cs%26%26a.withToggle)%7Bu.appendChild(document.createTextNode(%22%20%E2%80%94%20alle%20Details%20anzeigen%22))%3Bconst%20t%3Ddocument.createElement(%22input%22)%3Bt.type%3D%22checkbox%22%2Ct.className%3D%60%24%7Be%7D-toggle%60%2Ct.style.margin%3D%220%200%200%204px%22%2Ct.style.verticalAlign%3D%22baseline%22%2Ct.addEventListener(%22change%22%2Cfunction()%7Bdocument.querySelectorAll(%60.%24%7Be%7D-details%60).forEach(e%3D%3E%7Be.style.display%3Dthis.checked%3F%22inline%22%3A%22none%22%7D)%7D)%2Cu.appendChild(t)%7Dreturn%20s%26%26(document.querySelectorAll(%60.%24%7Be%7D-global%60).forEach(e%3D%3Ee.remove())%2Cu.className%2B%3D%60%20%24%7Be%7D-global%60)%2C%22absolute%22%3D%3D%3Da.position%26%26l.parentNode%3Fl.parentNode.insertBefore(u%2Cl.nextSibling)%3A(a.insertInto%7C%7Cl.parentNode).appendChild(u)%2Cu%7Dfunction%20d(e%2Ct)%7Bconst%20n%3Dt.getAttribute(e)%3Bif(!n)return%20null%3Bconst%20o%3Dn.split(%22%20%22).map(e%3D%3Ee.trim()).filter(Boolean)%2Cl%3D%5B%5D%3Breturn%20o.forEach(n%3D%3E%7Bconst%20o%3Ddocument.getElementById(n)%3Bif(!o)return%3Bu(o%2C%22warning%22%2C%5B%60Referenziert%20von%20%5B%24%7Be%7D%3D%22%60%2C%7Bcode%3At.id%7C%7C%22%E2%80%A6%22%7D%2C'%22%5D'%5D%2C%7Bicon%3A%22%E2%9A%A0%EF%B8%8F%22%2Cposition%3A%22absolute%22%7D)%3Bconst%20r%3Do.textContent.trim()%3Br%26%26l.push(r)%7D)%2Cl.length%3Fl.join(%22%20%22)%3Anull%7D!function%20t()%7Bc(%60.%24%7Be%7D%60%2Cdocument%2Ce%3D%3Ee.remove())%3Bconst%20n%3Dr()%2Co%3D%7Bok%3A0%2Cerror%3A0%2Cwarning%3A0%2Cexcluded%3A0%2Ctotal%3A0%7D%3Bc(%22a%5Balt%5D%2C%20button%5Balt%5D%2C%20label%5Balt%5D%22%2Cdocument%2Ce%3D%3E%7Bu(e%2C%22error%22%2C%5B%60%3C%24%7Be.tagName.toLowerCase()%7D%3E%20mit%20ung%C3%BCltigem%20%60%2C%7Bcode%3A%60alt%3D%22%24%7Be.getAttribute(%22alt%22)%7D%22%60%7D%5D%2C%7Bicon%3A%22%E2%9C%96%22%2Cposition%3A%22absolute%22%7D)%7D)%2Cc('img%2C%20%5Brole%3D%22img%22%5D'%2Cdocument%2Ce%3D%3E%7Bif(o.total%2B%3D1%2Cfunction(e%2Ct)%7Bconst%20n%3Di(e)%3Breturn%20null!%3D%3Dn%26%26t.includes(n)%7D(e%2Cn))return%20o.excluded%2B%3D1%2Cvoid%20u(e%2C%22excluded%22%2C%5B%22Ausgeschlossen%20(manuell%20als%20dekorativ%20markiert)%22%5D%2C%7Bicon%3A%22%E2%A6%B8%22%2Cposition%3A%22absolute%22%2ConClick%3A()%3D%3E%7Ba(e)%2Ct()%7D%7D)%3Bconst%20l%3De.hasAttribute(%22alt%22)%2Cr%3Dl%3Fe.getAttribute(%22alt%22)%3Anull%2Cc%3De.hasAttribute(%22aria-label%22)%2Cf%3Dd(%22aria-describedby%22%2Ce)%2Cg%3Dd(%22aria-labelledby%22%2Ce)%2Cm%3De.hasAttribute(%22title%22)%2Cp%3De.hasAttribute(%22longdesc%22)%2Ch%3Dc%7C%7Cnull!%3D%3Df%7C%7Cnull!%3D%3Dg%2Cb%3Ds(e)%3F%22Bild%20in%20Link%3A%20%22%3A%22%22%2Cy%3D%5B%5D%3Blet%20x%2C%24%3Bif(m%26%26y.push(%22%20%22%2C%7Bcode%3A%60title%3D%22%24%7Be.getAttribute(%22title%22)%7D%22%60%7D)%2Cp%26%26y.push(%22%20%22%2C%7Bcode%3A%60longdesc%3D%22%24%7Be.getAttribute(%22longdesc%22)%7D%22%60%7D)%2Cl)%7Bconst%20e%3D0%3D%3D%3Dr.trim().length%3Bx%3D%5Bb%2C%7Bcode%3A%60alt%3D%22%24%7Br%7D%22%60%7D%2C...y%5D%2C%24%3De%3F%22warning%22%3A%22success%22%7Delse%20if(h)%7Bx%3D%5Bm%3F%22%22%3Ab%2C%7Bstrike%3A%22alt%22%7D%2C%22%20fehlt%2C%20aber%20ARIA-Name%20vorhanden%3A%20%22%2C%7Bcode%3Ac%3Fe.getAttribute(%22aria-label%22)%3Ag%7C%7Cf%7D%2C...y%5D%2C%24%3D%22warning%22%7Delse%20x%3D%5Bb%2C%7Bstrike%3A%22alt%22%7D%2C%22%20fehlt%22%2C...y%5D%2C%24%3D%22error%22%3Bo%5B%22success%22%3D%3D%3D%24%3F%22ok%22%3A%24%5D%2B%3D1%2Cu(e%2C%24%2Cx%2C%7Bicon%3A%22success%22%3D%3D%3D%24%3F%22%E2%9C%94%22%3A%22error%22%3D%3D%3D%24%3F%22%E2%9C%96%22%3A%22%E2%9A%A0%EF%B8%8F%22%2Cposition%3A%22absolute%22%2ConClick%3A()%3D%3E%7Ba(e)%2Ct()%7D%7D)%7D)%3Bconst%20l%3Do.error%3E0%3F%22error%22%3Ao.warning%3E0%3F%22warning%22%3A%22success%22%2Cf%3Do.total%3F%60Bilder%3A%20%24%7Bo.total%7D%20%C2%B7%20%E2%9C%94%20%24%7Bo.ok%7D%20OK%20%C2%B7%20%E2%9C%96%20%24%7Bo.error%7D%20Fehler%20%C2%B7%20%E2%9A%A0%EF%B8%8F%20%24%7Bo.warning%7D%20Warnung%20%C2%B7%20%E2%A6%B8%20%24%7Bo.excluded%7D%20ausgeschlossen%60%3A%22Keine%20Bilder%20auf%20dieser%20Seite%20gefunden.%22%3Bu(document.body%2Co.total%3Fl%3A%22info%22%2Cf%2C%7Bglobal%3A!0%2CwithToggle%3A!!o.total%2CextraStyle%3A%7Bposition%3A%22fixed%22%2Ctop%3A%220%22%2Cleft%3A%220%22%7D%7D)%7D()%7D()%3B" title="Ziehe mich in die Lesezeichenleiste">Alt-Text Checker</a>
|
||
</p>
|
||
|
||
<blockquote>
|
||
<p>Ist die Lesezeichenleiste nicht sichtbar? In Chrome/Edge/Firefox: <code>Strg+Umschalt+B</code> (Mac: <code>Cmd+Umschalt+B</code>).</p>
|
||
</blockquote>
|
||
|
||
<blockquote>
|
||
<p>Falls Drag & Drop nicht funktioniert: Lesezeichen manuell anlegen (Rechtsklick auf Lesezeichenleiste → „Seite hinzufügen" o.ä.), als Namen <em>„Alt-Text Checker"</em> und als Adresse den Link-Code aus <code>dist/bookmarklet.txt</code> eintragen.</p>
|
||
</blockquote>
|
||
|
||
<h2>2. Bookmarklet benutzen</h2>
|
||
<ul>
|
||
<li>Öffne eine beliebige Website</li>
|
||
<li>Klicke in der Lesezeichenleiste auf <strong>„Alt-Text Checker"</strong></li>
|
||
<li>Jedes Bild bekommt sofort ein kleines Label mit Status</li>
|
||
<li>Erneuter Klick auf das Bookmarklet aktualisiert die Analyse (z.B. nach dem Scrollen zu neu geladenen Bildern)</li>
|
||
</ul>
|
||
|
||
<h2>Was bedeuten die Farben?</h2>
|
||
<ul>
|
||
<li><strong>Rot – Fehler</strong>: Kein <code>alt</code>-Attribut und kein ARIA-Ersatz. Screenreader können das Bild nicht beschreiben.</li>
|
||
<li><strong>Orange – Warnung</strong>: Leeres <code>alt=""</code> (dekorativ) oder nur über ARIA benannt statt über <code>alt</code>.</li>
|
||
<li><strong>Grün – OK</strong>: Alt-Text ist vorhanden und nicht leer.</li>
|
||
<li><strong>Grau – Ignoriert</strong>: Du hast dieses Bild manuell von der Prüfung ausgeschlossen (z.B. bewusst dekorativ).</li>
|
||
</ul>
|
||
|
||
<h2>Bild von Prüfung ausschließen</h2>
|
||
<p>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 <code>localStorage</code> deines Browsers <strong>pro Website-URL</strong> gespeichert und bleibt auch nach einem Neuladen der Seite erhalten.</p>
|
||
|
||
<h2>Datenschutz</h2>
|
||
<p>Das Bookmarklet führt reines JavaScript im Browser aus. Es werden keine Daten an externe Server gesendet – die einzige Speicherung erfolgt lokal im <code>localStorage</code> des Browsers.</p>
|
||
|
||
</body>
|
||
</html>
|