Site Updates2019-10-19

I've been taking advantage of all the "violin dad" time I have every week when Z is in symphony practice by doing some practice of my own. I started bringing in my guitar, and using one of the empty practice rooms to play some hits from the 80's and 90's. After my fingertips cry for mercy, I gingerly tap out code on my laptop, and I've spent the last few weeks improving my site. I added a tagging system to the blog, as well as pagination to the blog index, then implemented a workaround for Gatsby's broken focus management when navigating.

That last one is a bit unfortunate. Although Gatsby advertises its accessibility heavily specifically boasts accessible routing and page change announcement with the Reach Router, that feature has been broken since I began playing with Gatsby last Spring (2019), and I'm not sure it ever worked in Gatsby 2.x.

Focus management is always an issue with Single Page Apps - sites where the browser doesn't actually load a new page, but instead uses javascript to replaces sections of the page on-the-fly. Instead of having to wait for a whole new page to load, users get a nice snappy "app" feel since only the new content has to load and render. Without some help though, screen readers are oblivious to what just changed. Unless the focus is directed to the new content, nothing is announced, and it's then up to the poor user to hunt around and find what changed.

Anyway, the Gatsby issue spawned a lengthy blog post, and the fix is being prioritized in Gatsby's roadmap. Insted of waiting for it, I put in a shim that will focus the H1 of each page when it loads. I think that this replicates the SPA experience for screen readers, and is better than sticking with the "old pattern" of focusing the top of the page as if we loaded a whole new page (and forcing the user to "skip to main content" and wade through the unchanged content to find what's new).