Thanks to the fantastic comments on my previous post, I’ve made some accessibility improvements. Chief among them: adding WAI-ARIA
role values to various parts of the structure. These include:
role="banner"for the site’s masthead
role="navigation"added to the navigation links, including subnavigation links like previous/next posts
role="main"for the main portion of a page
role="complementary"for sidebars in the blog archives
role="article"for any blog post, whether there are several on a page or just one
In addition, I restored skip links to the masthead of most pages (the rest will get them soon). The links are revealed on keyboard focus, which I’m not sure I like. I feel like these aren’t quite where they need to be. A big limitation is the lack of
Speaking of the navigation links, they’ve been moved in the source order to match their place in the visual layout. My instincts with regard to source order and layout placement were confirmed to be woefully out of date: the best advice now is to put the markup where the layout calls for the content to be. If you’re putting navigation links just under the masthead, then put their markup right after the masthead’s markup. So I did that.
The one thing I didn’t change is heading levels, which suffer all the usual problems. Right now, the masthead’s “meyerweb.com” is always an
<h1> and the page title (or blog post titles) are all
<h2>. If I demoted the masthead content to, say, a plain old
<div>, and promoted the post headings, then on pages like the home page, there’d be a whole bunch of
<h1>s. I’ve been told that’s a no-no. If I’m wrong about that, let me know!
There’s still more to do, but I was able to put these into place with no more than a few minutes’ work, and going by what commenters told me, these will help quite a bit. My thanks to everyone who contributed their insights and expertise!