/* Attach this CSS file to your Website by adding the following line to the section AFTER your other stylesheets of your html document: Documentation - https://github.com/absichtbar/css-accessibility-check Created by: Annika Brinkmann - https://annika-brinkmann.de Version: Version: 0.4 – 25th of October 2023 */ /* Visual indicator this file applys */ html::before {content: "css-accessibility-check Styles apply. If nothing is marked as an error you/the developers did a great job to avoid the most common mistakes regarding accessibility!";color: #000000; background: #FFFFFF; border: 3px solid #000000; padding: 2px;} /* 2. Missing alternative text for images OR alternative text is not a good choice (english only) OR contains only the file name */ /* Images with only one word or only the URL as content of the alt tag are marked red – if no title or role not presentation are marked with red dashed outline */ img[alt]:not([alt*=" "]):not([title]):not([role="presentation"]), img[alt=" "]:not([title]):not([role="presentation"]), img[alt*=".jpg"]:not([alt*=" "]):not([title]):not([role="presentation"]), img[alt*=".png"]:not([alt*=" "]):not([title]):not([role="presentation"]), img[alt*=".svg"]:not([alt*=" "]):not([title]):not([role="presentation"]), img[alt*=".webp"]:not([alt*=" "]):not([title]):not([role="presentation"]), img[alt*=".gif"]:not([alt*=" "]):not([title]):not([role="presentation"]), /* Images with empty title and no or empty alt tag and without role presentation are marked with red dashed outline */ img[title=""]:not([alt]):not([role="presentation"]), img[title=" "]:not([alt]):not([role="presentation"]), img[title=""]:not([alt*=" "]):not([role="presentation"]), img[title=" "]:not([alt*=" "]):not([role="presentation"]), img[title=""][alt=""]:not([role="presentation"]), img[title=" "][alt=""]:not([role="presentation"]), img[title=""][alt=" "]:not([role="presentation"]), img[title=" "][alt=" "]:not([role="presentation"]), /* images without alt tag and no or empty title tag or title tag without empty space are marked with red dashed outline */ img:not([alt]):not([title]):not([role="presentation"]), img:not([alt])[title=""]:not([role="presentation"]), img:not([alt])[title=" "]:not([role="presentation"]){ outline: 3px dashed red; outline-offset: 3px; } /* linked images do not display the red dashed outline, if the link itself contains a non empty title */ a[title]:not([title=""]):not([title=" "]) img { outline: initial !important; outline-offset: initial !important; } /* 3. Empty links */ a:empty:not([title]):not([aria-label]):not([aria-labelledby]), a:empty:not([title]):not([aria-label])[aria-labelledby=""], a:empty:not([title])[aria-label=""]:not([aria-labelledby]), a:empty:not([title])[aria-label=""][aria-labelledby=""], a:empty[title=""]:not([aria-label]):not([aria-labelledby]), a:empty[title=""]:not([aria-label])[aria-labelledby=""], a:empty[title=""][aria-label=""]:not([aria-labelledby]), a:empty[title=""][aria-label=""][aria-labelledby=""] { background: red !important; border: red !important; color: red !important; } a:empty:not([title]):not([aria-label]):not([aria-labelledby])::before, a:empty:not([title]):not([aria-label])[aria-labelledby=""]::before, a:empty:not([title])[aria-label=""]:not([aria-labelledby])::before, a:empty:not([title])[aria-label=""][aria-labelledby=""]::before, a:empty[title=""]:not([aria-label]):not([aria-labelledby])::before, a:empty[title=""]:not([aria-label])[aria-labelledby=""]::before, a:empty[title=""][aria-label=""]:not([aria-labelledby])::before, a:empty[title=""][aria-label=""][aria-labelledby=""]::before, a:empty:not([title]):not([aria-label]):not([aria-labelledby])::after, a:empty:not([title]):not([aria-label])[aria-labelledby=""]::after, a:empty:not([title])[aria-label=""]:not([aria-labelledby])::after, a:empty:not([title])[aria-label=""][aria-labelledby=""]::after, a:empty[title=""]:not([aria-label]):not([aria-labelledby])::after, a:empty[title=""]:not([aria-label])[aria-labelledby=""]::after, a:empty[title=""][aria-label=""]:not([aria-labelledby])::after, a:empty[title=""][aria-label=""][aria-labelledby=""]::after { content: none !important; } /* 4. Missing form input labels */ form:has(input:not([type="hidden"]):not([button])):not(:has(label)), form:has(input:not([type="hidden"]):not([button])):has(label:empty){ background: red !important; border: red !important; color: red !important; } /* 5. Empty buttons */ button:empty { background: red !important; border: red !important; color: red !important; } button:empty::before, button:empty::after { content: none !important; } /* 6. Missing document language */ html:not([lang])::before, html[lang=""]::before { content: "language tag is missing!"; background: red; color: white; padding: 2px; }