Collecting some frontend related notes, thoughts, bookmarks and tips.
Build and test against WCAG consistently. Understand each success criterion's meaning and how to be accessible: https://thisiswcag.com
https://github.com/alphagov/wcag-primer/wiki "outlines some approaches for testing websites and applications against the Web Content Accessibility Guidelines (WCAG) 2.1 AA Level".
https://randoma11y.com creates random accessible color combinations.
Quickly analyze landmarks, headings and links of a website: https://xi.github.io/a11y-outline/
My favourite bookmarklet.
@media (forced-colors: active) {
svg {
fill: CanvasText;
}
a svg {
fill: LinkText;
}
}This to consider for screen readers when implementing dynamic search results: https://www.scottohara.me/blog/2022/02/05/dynamic-results.html
A few questions to help you decide if an image should have an alt value or not: https://www.w3.org/WAI/tutorials/images/decision-tree/
https://www.magentaa11y.com/web/ lets you create a comprehensive testing guide for all elements on your page.
Hiding elements visually, but keeping them for screen readers:
.u-hiddenVisually {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}My by far most used utility class.