tetchi blog

Tetchi's blog about life and stuff

Accessibility improvements to my blog


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 Content

The “Skip to main content” link appears when you hit tab.

“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.

read-more-before

Before: read more … what!? The suspense!

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.

read-more-after

After: read more [post title]. Much better context.

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.

headings-before

Headings: before. All headings were 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:

headings-after

Headings: after. Better hierarchy.

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.

all caps subtitle

All caps title: really annoying to listen to.

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, and buds.

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

all-caps-after

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:

landmarks-before

Before: only two 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


for my footer, it would automatically be mapped to a “footer” landmark. Bruce Lawson explains why this is not the case in this excellent blog post.

Following Bruce’s advice, I applied a role="contentinfo" to the


so that it would be picked up by Voiceover. I then added a aria-label="footer" to make it appear as “footer” in the Landmarks menu instead of the default “Content information” label, which I thought was a bit too generic.

landmarks-after

After: additional landmarks for better navigation.

6. aria-hidden=”true” crusade

The last thing I did was go through my blog and pick out anything that I felt was decorative and did not need to be read out by screen readers. Some examples of this were:

  • Commas between post tags
  • Hamburger image in the header
  • Social media icons in the footer
  • “/” divider used between links in the footer

Conclusion

All in all I was pretty happy with the a11y improvements. I bet the number of screen reader users that visit my blog is really low or non-existent, but it’s nice to have the site be as accessible as possible just in case!

I wanted to fix up the accessibility of the comments form as well, but unfortunately ran out of time. I’ll take care of that next weekend.

If you are an a11y expert or a screen reader user and encounter a problem on my blog, I’d love for you to make an issue here. Much appreciated!


Shoutouts to Scott for suggesting a lot of the a11y improvements in this post – you da man.

2 Comments

  • Franklyn
    Franklyn on March 11th, 2016

    Really inspiring stuff. I like your use of read more and having the topic as screen reader only.

  • tetchi
    tetchi on March 11th, 2016

    @Franklyn thanks so much for reading :)

Post a comment