Blog Accessibility Essentials: The Complete Guide

This guest post is by Steff Green of the Disabled Shop Blog.

Digital content has opened up a whole new world of possibility for people with print disabilities.

Previously, very little printed material was available in a format that blind and low vision people can access, (Braille, audio or large print), and these formats were costly and time-consuming to produce. But now, adaptive software has meant that content available electronically can be accessed by practically anyone.

With more resources than ever moving online or to electronic formats such as ebooks, people like me with low vision have access to more content than we could ever imagine.

It is estimated that there are around 25 million adults with significant sight loss) in the US today, and more than 285 million people around the world. That’s not including people with other disabilities who use adaptive software to access information, such as learning disabilities or motor impairments.

All these people could be reading your blog, so it stands to reason that you want to make sure they’re able to enjoy everything you have to offer.

A blog is never going to be perfect for everyone. There are so many conditions and disabilities in the world that it’s impossible to cater to all of them. That’s why many people who have disabilities use adaptive technology to help them access the web—they have to create the optimum conditions for themselves.

When creating an accessible website, what you’re trying to do is create a site that’s both easily viewable in its normal state and optimized to perform well when viewed with adaptive software.

As a bonus, an accessible website also happens to be extremely user-friendly for your whole readership, as well as being great for SEO.

What is adaptive equipment?

Adaptive equipment is any type of device that helps an individual perform an activity that they would not otherwise be able to perform due to a physical or mental condition or disability.

A blind person cannot access your blog in the normal way, so they must use some kind of adaptive equipment in order to enjoy your content. The most common piece of adaptive software is a screen reader: a program that reads out websites using synthetic speech for people with vision problems. A person can use keyboard commands to navigate through the site (since using a mouse is impractical).

Other adaptive software includes: zoom software, such as Zoomtext (I used to use this, but since switching to Mac, all the necessary software is inbuilt), Dragon Naturally Speaking. and a refreshable Braille display.

Blind and low-vision users aren’t the only people who need accessible websites. Other users have motor skill issues that make using a mouse difficult, or might have dyslexia and have difficulty understanding text when they read it. Adaptive equipment such as switches and keyboards controlled by the feet, head or other input methods can be used.

Making a blog post accessible

So how do you ensure that your blog is accessible? It may surprise you to learn that creating accessible blog posts is easy, and you’re probably doing a pretty good job already.

But understanding why you format blog posts in a certain way will help ensure that you continue to create accessible blog posts.

Headings

Heading levels are an important part of the functionality of adaptive software. The screen reader can navigate through headings, much like skipping through the chapters in a book. This enables the reader to choose the content they want to read.

Problems arise when bloggers don’t use the heading tags correctly—usually by bolding a heading instead of using an h1, h2, h3, or h4 tag, or by failing to use headings in a cohesive way.

Adaptive software retains the hierarchy of headings, so a user can navigate through post titles (h1) or subtitles within a post (h2) or headings underneath a subtitle (h3-5). But if you don’t use these headings consistently, the reader will become confused.

How can you improve?

• Always use the heading levels to denote headings—don’t simply place headings in bold.
• Nest headings correctly, so the heading hierarchy makes sense in a screen reader.

Images

You might wonder how adaptive software deals with images. Screen readers read out the alternative or alt text, and this tells the listener what’s in the image.

So to make your images accessible, you need to ensure each and every one has an alternative text description that explains what’s in the image. It doesn’t have to be long and wordy: “infographic displaying social media stats” is fine, as most of the info will be in the text surrounding that image.

SEO gurus recommend putting your keywords into the alt text, which is definitely a good idea, but only if they make sense in the context of the image.

How can you improve?

• Ensure every image has an alt text description.
• Use descriptions to explain what is happening in the text, not just to add keywords.
• Add titles to your images (this helps with navigation, though it isn’t necessary).

Links

Hyperlinks within your post (and across your whole blog) should be able to be easily read and understood on their own. This is because screen readers can give the user a list of the hyperlinks on a page. Having ten hyperlinks reading “here” doesn’t help the listener figure out where she wants to go.

Meaningful hyperlinks (especially those containing keywords) are also good for SEO, so it’s a good practice to get into.

Links should also open in the same window, as opening extra windows can make navigation cumbersome. On WordPress, you can do this easily by setting the Target at “Open in this Window/Frame” in the Link box.

And, finally, when designing your blog, make sure links stand out from the text. Use bold, underline, and different fonts or colors to distinguish links from your main text. This helps everyone locate your links with ease.

How can you improve?

• Avoid links like “Click here” and “NOW” and “More”.
• Ensure the text of hyperlinks provides a meaningful phrase when read out of content.
• Make sure links are easily visible—by being a different color, bold, and/or underlined.
• Ensure links open in the same window.

Tiny links and icons

Tiny things are cute: tiny houses, tiny hands and feet, and tiny kittens. But tiny links and icons are just plain difficult. If you have some vision, like me, you may spend several minutes looking for a link or icon on a page, when you’d have found it easily if only it were a little larger.

One of the hardest things to find are those little “X”s or “close” links in the corners of those pop-up boxes (which I also loathe, but more on those in the next section). On some sites, these are practically impossible to see. I’ll click away if I can’t get rid of that box without straining my eyes.

Tiny links are also difficult for people with poor motor control to locate. Likewise, having lots of tiny links close together, such as social media keys on a navigation panel, means your visitors are often clicking the wrong thing by accident. This is frustrating and often forces readers to look for information elsewhere.

How can you improve?

• Look at your site. Are you links identified visually? Can you easily determine where you are and what the focus of each page is?
• Can you make hyperlinks longer than one symbol/word so they’re more obvious?
• Can you make icons larger and use more space between them?

Dynamic elements

Pop-up boxes, slide out menus and other dynamic elements may look great, but they are extremely difficult to navigate.

If you’re slow on the mouse, the panels can disappear before you’ve clicked on the link you require. And those pop-up “sign up to my newsletter” boxes are extremely frustrating, but I understand why some bloggers are reluctant to get rid of them.

How can you improve?

• Think carefully before using dynamic elements on your website.
• Test your site by attempting to navigate it using the mouse in your non-dominant hand. If you’re struggling with navigation menus and tiny icons, maybe it’s time to improve your design.
• Ensure your site is coded correctly so adaptive software users can easily skip past or stop dynamic elements such as menus or updating Twitter feeds.

Captcha

Okay, captcha services are one of my pet accessibility peeves. They seem to be getting progressively illegible, with letters layered on top of one another, squashed up like they’ve gone through a sausage machine, or struck through with so many lines and swirls they’re impossible to read.

You might say, “Oh, but there’s that audio button beside it. That makes captcha accessible.” Which is a fair comment. Except, have you ever tried to use the audio function? Half the time it doesn’t work, and the rest of the time it’s so garbled it’s impossible to understand.

How can you improve?

• Choose captcha screens that are readable: letters and numbers spaced apart with a non-distracting background, and small letters instead of capitals.
• Choose services without sloping letters.
• Use a tick-box that says “Uncheck if you’re human,” or another, non-captcha method of determining spam from legitimate comments.

Other tips for improving blog accessibility

• Have you created an audio or video post? It would be awesome if you could also provide a transcript and captions, so that everyone could enjoy the information in their preferred format.
• Using blockquotes to identify longer quotes helps those using a screen reader to distinguish between your voice and someone else’s.
• Instead of using the dash—or other symbols—to show items in a list, use the ordered or unordered list tags. The screen reader can then tell the listener that the items are in a list.
• Unplug your mouse. Now try to navigate through your site. Can you do it? Where do you get stuck? That’s the same place that will trip up adaptive software.

By following these simple rules, you’re creating accessibility best practice on your blog, and ensuring that more people are able to access and enjoy your content.

It only takes a few extra minutes to check that your blog posts are accessible, and after a few weeks, accessibility will become second nature.

The more you learn about accessibility, the more you come to understand and appreciate how different people access information, and this makes you a better—and more considerate—blogger.

Accessibility resources

• Blog Accessibility: a great site written by accessibility expert Glenda Watson Hyatt all about creating an accessible blogosphere.
• Web Content Accessibility Guidelines 2.0: international guidelines for accessible websites.
• WAVE Web Accessibility Evaluation Tool: a great tool to check if your website is accessible. Simply add your URL and check out the report.
• AChecker – Web Accessibility Checker: another tool for checking the accessibility of your website.

Steff Green is a legally blind freelance writer, blogger and illustrator. She writes about disability news, adaptive equipment and advocacy for the Disabled Shop Blog. Check out her latest post on Christmas Gift Ideas: Children’s Books about Disability.