Left Arrow.Back
Left Arrow.Back

Notes / Web / Accessibility


The internationally recognized symbol for accessibility.



Status: seed

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
  • AA
  • 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.

A series of squares with their dimensions written next to them.

Clickable Target Size

The recommended minimums for clickabled targets (buttons, links, ..):

  • 44 x 44px for AAA rating.
  • 24 x 24px for AA rating.
  • 20 x 240px for AA rating only if:
    • the area is inline (such as a a link within a paragraph) or
    • there is is minimum 4px gap between adjacent clickable areas.
A screenshot of a desktop widget. It shows 2 colors with their contrast value displayed below them.


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.

3 squares. 1 filled with stripe. The others fill with a solid color.

Hiding Content

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.

Scenario How Example (HTML & CSS)
Hide element visually & from the accessibility tree Use CSS display property
.hide { 
    display: none; 

<div class="hide">
Hide element from the accessibility tree If the element is an img, you can set alt="". For all other elements, use the aria-hidden attribute.
<div aria-hidden="true"> 

Hide element visually Use a collection of CSS settings (see example) that visually hides an element while keeping it in the accessibility tree (visible to screen-readers). To avoid unwanted behaviour, such as scrolling to an invisible element, no focusable element should be within an element with this class.
.screenReaderOnly {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    margin: -1px;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;

<div class="screenReaderOnly">