These past few months I’ve been super-interested in web accessibility (a11y). As I was learning more about it, I was also compiling a list of a11y-related issues on my own blog. This weekend I spent some time to finally scratch the ol’ itch and crush a bunch of these issues. This is great news for all ten of my readers!

1. Skip to main content button

The first thing I implemented was a “Skip to main content” link. I followed the example on WebAim.org here.

“Skip to main content” links are really handy for keyboard users, because oftentimes there is a lot of content before the main content of a page that they want to skip (ex: navigation links, logos, titles, etc.). Having this link allows users to simply hit the Tab key and skip right to the meat and potatoes.

This was fairly simply to implement. What I did was put an anchor tag at the very top of the page that is positioned off-screen by default, but positions itself on-screen on :focus. The link, when clicked, jumps to the div that wraps the main content. For good measure, I also added a tabindex="-1" to the main content div.

2. Better “Read More” links

The “Read More” links under each post summary were not very helpful. Screen readers would read it as “Read more [arrow sign]”, which is not really helpful.

To improve this, I created a CSS class called .visually-hidden that positions items off-screen (using this technique). I then inserted a span with this class inside the anchor tag that provided more information about the link.

   Read more about →

This change makes no visual difference, but provides a lot more information about the “Read more” links for screen reader users.

Finally, I applied aria-hidden="true" to the → symbol, which makes it so that it is completely ignored by screen readers. This is perfect for decorative things like the arrow here that do not need to be read out by screen readers.

3. Re-organizing headings

Originally I had all the post titles on my blog as h1s. This was not very helpful for screen readers as everything would be listed on one level. The screenshot below of the Headings menu in Voiceover shows how the headings were all on the same level.

I made all of the post titles h2s, and added a visually hidden title to my header with the text “tetchi’s blog”. The headings menu now looked like this:

I think it makes sense to have the post titles hierarchically lower than the site title. This is probably more of a semantics win, but helpful for screen readers nonetheless.

4. Less annoying subtitle

One thing I noticed while testing was that words in ALL CAPS are read out character-by-character as if they are acronyms. This posed a problem for the subtitle under my navigation, which was all caps and would be read as “T-E-T-C-H-I’s B-L-” …and so on.

To remedy this, I first applied a aria-hidden="true" attribute to the all-caps version of the subtitle so that it is completely ignored by screen readers. Next, I added a span with the .visually-hidden class that I created earlier with more screen reader-friendly text.

  TETCHI'S BLOG. BASS // BURGERS // BAHDS.
  tetchi's blog. Bass, burgers, and buds.

The screenshot below shows the result – a much less annoying reading of the subtitle.

One takeaway from this was that screen readers will read words as all caps even if it’s being transformed into uppercase via CSS’s text-transform: uppercase property.

5. Better landmarks

The Landmarks menu in VoiceOver breaks up the page into meaningful regions, making it easier for screen reader users to navigate. As shown in the screenshot below, my blog did not have many helpful landmarks:

I started off by adding a role="main" to the main content div, which would make it so that VoiceOver picks it up as “main” in the Landmarks menu. This provided another way for screen reader users to go to the main content.

I then tried to add the footer to the Landmarks list, but I was confused as to why my footer wasn’t being picked up in the first place. I has assumed that if I used the HTML5

2 Comments