WCAG
Web content accessibility guidelines WebAIM: WebAIM’s WCAG 2 Checklist
Sementics
https://www.theodinproject.com/lessons/node-path-advanced-html-and-css-semantic-html
Headings and landmarks
Headings are the <h1> through <h6> elements, and like the name implies, these elements act as headings to sections of a page. Landmarks, on the other hand, are HTML elements that act as regions of a page. There are seven native HTML elements that define these landmark regions:
<aside><footer><form><header><main><nav><section>
By properly using landmarks and headings, you provide users of assistive technologies a more operable and understandable page: not only can screen reader users navigate a page via landmarks and headings by using navigation keyboard commands (or opening a menu in their screen reader), but these elements also have their roles announced to provide additional context.
If you were to use only <div> elements to act as these landmarks and headings, maybe adding in some CSS to visually style them, then a screen reader user would have to go through the entire page just to get to a specific section, and they may not be able to actually tell what is a heading or a landmark on the page.
COLORS
A contrast ratio is the difference in brightness between two colors expressed as a ratio. White text on a white background would have lowest ratio (1:1), while black text on a white background would have the highest (21:1). Contrast ratios refer to both normal text as well as images of text.
There are two different conformance levels for contrast ratios, both of which have rules for normal text and large text. Normal text is defined as text with a font size that’s less than 18 points/24px (or less than 14 points/18.66px for bold text), and large text is defined as text with a font size that is at least 18 points/24px (or at least 14 points/18.66px for bold text).
- Level AA (minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
- Level AAA (enhanced) requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Both conformance levels have exceptions that don’t need to follow the contrast ratio rules:
- Incidental text, such as text that just happens to be within an image that has other significant visual content, or text that is purely decorative.
- Text that is part of an inactive or disabled user interface component, such as a button that is disabled and has a lowered opacity.
- Text that is part of a logo or brand name.
At this point you might be thinking, “18.66 pixels? 4.5:1? How the heck am I supposed to remember these numbers? Wait, how am I supposed to calculate the ratios in the first place?!” Luckily for you, you don’t have to!
WebAIM Contrast Checker is a fantastic tool for checking contrast ratios. Just enter the HEX code of the foreground and background colors and it calculates what conformance levels, if any, the contrast ratio passes. The page also has a link for a link contrast checker, which goes over what the contrast ratio should be if a text link isn’t underlined.
You can also check the contrast ratio of the text within an element using your browser’s dev tools. In Chrome, you would click the “element picker” tool in the Elements tab, then hover over an element on the web page. If you select an element with text in the Elements tab, you can click on the color picker tool for the “color” property under Styles to view the contrast ratio as well.
Dark Themes
https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class
Keybored
focus pr transform scale and border remove outline remove
tabindex = “0”