Close
Close

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

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.

About Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for ProBlogger check out our Write for ProBlogger page for details about how YOU can share your tips with our community.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Quite possibly the most relevant post I’ve read in a a long time. This information was so valuable. Some of the things, like you said, we’re already doing, but we’re not relating them to accessibility. I’ve been an advocate for accessibility in physical spaces, but I’ve been guilty of neglecting it online. I can’t stress enough how glad I am that you shared this post. I’m keeping it as a reference so that I can go back and evaluate my blog. Thanks so much!

    • Steff says:

      You are welcome – I’m glad you found it relevant, Sarah. It’s a huge area of online content production that I think a lot of people aren’t even aware is an issue – so awareness of accessibility is my first priority!

  2. Great post! I think about accessibility from time to time on my blog, but these tips bring new light to the discussion. I will definitely be going over my site this weekend to look for ways to improve. :)

  3. Great post and many things I’ve been thinking about lately, although I’m not vision impaired. But I just got a tablet and realized how “tiny links” are horrible to try to tap on with a finger — that is, without a mouse.

    Now, when I go back over old posts I’ll be looking at the other items you mentioned, too. Thanks for the info — since I’ve never used or even seen the screen readers, I had no idea about some of these items.

  4. Great post, Steff. This is one reason I love Mac. All the software is built in :) I also agree with you on CAPTCHA. Really, really annoying. Even for non-disabled.

    I’m wondering if mobile technology has also adapted with flexible software to cater to disabled users too (besisdes Siri, etc)?

  5. Good tips. A recent trend that flies in the face of accessibility is the use of infographics. They’re not accessible to screen readers at all. So if you’re putting them on your blog or site, I won’t be able to read them as a screen reader user myself.
    I almost always set external links to open in a new window and internal links to open in the same window. I want people to come back to my site when they’ve closed out the new window they’ve opened. I don’t see this as an accessibility problem.
    There’s a program called Web Vism for Firefox users which helps solve captchas.
    However, the down side of using Firefox is there’s often a conflict between screen readers and Flash. That means it’s easier to view videos in Internet Explorer. Some browsers, like Chrome, won’t work with screen readers.

    • Steff says:

      Thanks for your thoughts, John. I didn’t know that Chrome doesn’t work with screen readers. A lot of people I work with have that issue with Firefox and flash, as well. I’ll check out Web Vism – I use Safari but would probably switch for something like that!

  6. Dustin Small says:

    I have to admit that I haven’t given accessibility much thought on my blog until recently. Earlier this week I was diagnosed with an eye disorder that is severely disrupting my vision, particularly when looking at the computer screen. Thankfully it will only be temporary, but this past week has given me new insight into how difficult it can be to navigate the web with poor vision.

    Oh yes – Captchas….. I have trouble solving some of those even when I HAVE perfect vision. It’s getting ridiculous!

    • Steff says:

      Oh, I’m sorry to hear about your eye disorder – hope it clears up soon! But it’s great that you can use it even as a positive to improve your blog for those of us whose vision won’t clear up :)

      Captchas are the bane of my existence. I swear they are getting more and more unreadable.

    • RKS Technologies is a small company from india, which provides complete Web services, Content management system solution, SEO, SEM, SMO, Internet Marketing etc since July, 1999.

      Thanks
      RKS Technologies

  7. Wan Fauzi says:

    a great guide for bloggers .. very interesting ..

  8. Many people aren’t really visually impaired as such, but may have problems with tiny fonts or low contrast (yesterday I tried to navigate a commercial website with white text on a pink background in the navbar!). Small fonts are usually easy to increase in size, but sometimes that messes up the layout, e.g. navbar no longer works properly.

    Remember accessibility when designing web forms, as well!

    • Steff says:

      Right on both counts, Maija. As someone above was saying, tiny fonts and links can be an issue for people reading on tablets or smartphones, or people with motor disabilities who might, for instance, only be able to move the mouse in jerky movements. Getting it to land on a tiny link would be nearly impossible.

      Web forms was a WHOLE other topic – and aggrevation for vision impaired readers. I decided to leave it alone for this article, otherwise it would be 5000 words long!

  9. I am SO glad to see a larger site present this – and you did such a great job with it as well! Both as a special needs parent and as a consultant, I’m embarrassed and surprised by the relative ignorance about accessibility and its importance in designing a site/blog.

    You did an excellent job presenting most of my top notes when I speak with clients. The only extra caveat, which most folks think of as an older design technique anyway, is to watch flashing text, flashing graphics, even slideshows that move automatically at a fast pace if there is a high contrast between images – folks with migraines and epilepsy will thank you!

  10. Yann says:

    Accessibility is so important when it comes to blogging. Giving the best experience to our readers is the best way to grow our blogs and get our visitors more engaged. Thanks for this post.