Skip to main content

Next.js + React + Sass + Cloudflare

Accessibility

Last updated

blogblog aims to meet WCAG 2.2 at level AA. It is a small site, so the work is mostly about getting the basics right on every page.

What is in place

  • A “Skip to main content” link is the first thing you reach with the Tab key.
  • Each page uses header, navigation, main and footer landmarks, and declares its language as English.
  • Focused links and buttons get a 3px outline, so you can see where you are.
  • Links that open a new tab say so to screen readers.
  • The colours follow your system light or dark setting, and text meets the AA contrast ratio in both.
  • Animations are switched off when you ask your system to reduce motion.
  • The layout works down to a 360px wide screen without sideways scrolling.

How it is tested

An automated test suite runs axe against every page in light and dark mode, at 360px and 1440px wide, and fails on any WCAG 2.2 AA rule it catches. Other tests check the skip link, the focus outline and keyboard access to the footer. Automated checks miss things, so some problems may still be there.

Known limitations

  • The posts on the home page are samples. Their links do not lead to a post yet.
  • The “Writing” link in the header scrolls to the list of posts but leaves keyboard focus in the header.

Report a problem

If something gets in your way, please open an issue on GitHub (opens in a new tab). Say which page it was and what you were using, such as your browser or screen reader.