A11y (Web Accessibility) refers to best practices for keeping a website usable despite physical & technical restrictions. WCAG (Web Content Accessibility Guidelines) guidelines are categorized into 3 levels of conformance in order to meet the needs of different groups & different situations:
- AAA - most accessible
- A - least accessible
WCAG does not recommend aiming for AAA for entire sites because it is not possible for some content. In general, AA is aimed for.
Clickable Target Size
The recommended minimums for clickabled targets (buttons, links, ..):
When it comes to colors, accessibility is based on contrast. For example, how different is the text color compared to the background color. The higher the contrast, the more accessible. Pika is an open-source colour app. Using a color picker, select a foreground & background color. It will display what level (less than AA, AA or AAA) that combination has.
Browsers convert markup into an internal representation called the DOM tree. An accessibility tree is also created based on the DOM tree. This tree is used by assistive tools, like screen-readers, to communicate what is on a web page in different ways other than the default. Sometimes you need to hide elements in the DOM tree but show them in the accessibility tree (or vice-versa). For example, an image used as a background texture. This may look nice but not unnecessary for a screen-reader to identify this element to a blind user. The below table lists how to hide elements in both trees.