accessibility cheatsheet

accessibility.md

JS tricks

document.body.addEventListener('focusin', (event) => {
    console.log(document.activeElement)
})

export const getFocusableNodes = (node, includeNegativeTabIndex) => {
  const nodes = [
    ...node.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'),
  ];
  const focusables = nodes.filter((node) => {
    if (node.hasAttribute('disabled')) return false;
    if (includeNegativeTabIndex) return true;

    return node.getAttribute('tabindex') !== '-1';
  });

  return focusables;
};

Css tricks

  .opacity {
    opacity: 0; /* computed in layout, exist in accessibility tree */
  }

  .display-none {
    display: none; /* not computed  in laout nor in accessibility tree */
  }

  .hidden {
    visibility: hidden; /* computed in layout, not in accessibility tree*/
  }

  .visually-hidden {
    /* exist in layout but doesn't take space, exist in accessibility tree  */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

Tools

• Chrome://accessibility to display the (raw) accessibility tree of a page

• NoCoffee allows to tweak on size + colors

• https://github.com/ThePacielloGroup/CCAe/releases/tag/v3.0.1 for color checkiing on text and none text elements

Informative

• In 2019, limit for AA is 4.5:1 and AAA is 7:1

Good to know

• aria-labelledby allows to reference an id representing the element owning label / title

• aria-describedby same as above but for the content

• aria-live informs that the block is subject to modifications without a full page reload (for arguments of the attr: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) NOT PUT IN CONDITIONAL RENDERING

• aria-invalid informs that a field value is invalid (for arguments of the attr: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute)

• we should propose a way to make the main content focusable (skipping nav) to directly access information. The idea is to put a link visually hidden and when focused (first link on the page, so first tab), it appears and can be clicked to access the main content

• Browser offers the capability to modify the size of the body element but not the others: use REM for people with vision problems

• Remove "user-scalable=no" from the meta headers

• prefers-reduced-motion for people having vestibular disorders / neurodivergence should apply on things moving on the screen (animating a self element should be okay) check the coga taskforce (https://github.com/w3c/coga/)

• make sure to use a valid font to avoid triggering eye strain

Other, links

• https://russmaxdesign.github.io/accessible-error-fieldset/

COmponents tricks

• We can't hide the native checkbox using .sr-only, we need to position it under the custom styled checkbox so that it's reachable with haptics on android devices
• it's okay to show a tbody with colspan/rowspan in order to show a loding indicator when necessary (or use an overlay if not necessary)