Commitment

I want everyone to be able to read this blog, whatever device, browser or assistive technology they use. The target is WCAG 2.2 level AA. That includes WCAG 2.1 AA, the level required by the European standard EN 301 549 that the European Accessibility Act refers to.

Conformance status

To the best of my knowledge the site meets WCAG 2.2 AA, apart from the limitations listed below. This is a self-assessment; the site has not been audited independently.

What the site does

  • Semantic HTML with landmarks, one h1 per page and a logical heading order.
  • A skip link, a visible focus indicator on every interactive element, and full keyboard access, including search (Ctrl/⌘ + K, Esc to close) and scrollable code blocks.
  • Text and interface colours that meet the contrast minimums (4.5:1 for text, 3:1 for interface elements), including the syntax highlighting.
  • Text alternatives for images and diagrams, and captions for diagrams.
  • Layouts that reflow down to 320 CSS pixels and zoom to 400% without horizontal scrolling of the page.
  • Touch targets of at least 24 by 24 pixels.
  • Respect for reduced-motion preferences and support for Windows contrast themes.
  • No time limits, no auto-playing media and no content that flashes.

How it is tested

  • Every change runs automated checks against all pages, on desktop and mobile widths: axe-core with the WCAG 2.0, 2.1 and 2.2 A/AA rules, keyboard and focus tests, reflow at 320 px, text-spacing overrides, a colour-contrast check of the design tokens and Lighthouse accessibility audits.
  • Manual checks with keyboard only and with browser zoom.

Automated tools cannot find every issue, which is why feedback is welcome.

Known limitations

  • Diagrams. Architecture diagrams have a short text alternative and a caption. The post text describes the same content, but the diagram itself can be hard to follow with a screen reader or when zoomed in on a small screen. Use Enlarge to open the full-size version.
  • Search. The search interface is the open-source Pagefind component. One of its controls (the tag filter) needed a fix on this site to announce its name; other issues in the component may exist.
  • Code samples keep their original formatting, so long lines scroll horizontally inside the code block (the page itself does not scroll sideways).

Feedback and contact

Did you run into a barrier on this site? Please let me know, and I will try to fix it. You can reach Syon Foppen via GitHub or LinkedIn. Please mention the page and what went wrong.