5 Accessibility Quick Wins (and two for this site)

From CSS Tricks: 5 Accessibility Quick Wins You Can Implement Today.

I like articles about accessibility in this format, how-tos of practical examples you see on almost every website. Heydon Pickering’s Inclusive Components was the first place I saw this, but the site had only a few examples and ended up being short-lived.

I went to implement two of the 5 “quick wins” above that were relevant to this site:

  1. The active page now shows up with a bit of style and the aria-current page. I was doing a gross hack with the window.location to parse out the current page before, and cleaned that up with Next’s useRouter.
  2. I thought the site didn’t have a document language, but it did! Modifying the <html> tag in Next is, like most JavaScript frameworks, somewhat unintuitive. This post shows one way: How to set the HTML lang attribute in Next.js? but I found out it doesn’t work with next export when generating a static site. I then realized I had already done it the other way, using a custom Document.

Tagged: web dev