The Transcontinental Disability Choir: How to make your blog accessible in five not-very-complicated steps

I love blogs. Blogs are where I’m at right now. I don’t have a lot of internet time, but I’m telling you, when I do, I head straight for a few blogs and start bouncing around, learning stuff about knitting, YA novels, Australian politics, infertility, raising kids, and why there are totally no women bloggers out there. (You know, except for all the women bloggers out there.) It’s fun!

A lot of people tell me they want to make their blog more accessible, but they aren’t really sure how to do that. I’ll own right up front that most of the accessibility issues relating to websites and blogs don’t directly affect me – I’m not blind, d/Deaf, and I don’t have mobility issues that could make web-surfing a pain. That means I may have lots of stuff at my fingertips that’s “Best Practice”, but people’s lived experience pretty much trumps my “studies show that”. Also, not all problems are ones you’re going to be able to fix at your end anyway. But a few key things with your blog can make a big difference in who can read it.

1.Transcripts, people, transcripts.

Yes, I know. You’ve found the best feminist rant ever, and you want to make sure everyone you know sees it. Maybe it’s Stacey Ann Chin’s latest poem, or a good video rant by someone on YouTube. Maybe it’s cute kittens, or your kid saying something wonderfully adorable. Give me a transcript.

I know transcripts can be difficult and time consuming, and all you want to do is toss up this great video from Sarah Haskins, so everyone can see how awesome she is. But a lot of people can’t assess that awesomeness without at least a description of what Sarah said. Taking the time to even write a brief summary, like “Sarah takes on advertisements for yogurt, all of which are aimed at women, and all of which present yogurt as being life-altering. ‘It’s Who-serves-yogurt-at-their-wedding good! It’s substitute-for-human-experience good! It’s being first woman president good!’”

Ideally, though, transcribe as much of it as you can. Or, look around – maybe someone else has transcribed it already, and you can just link your readers to that post. [scroll down] Or maybe you know someone who will transcribe for you, if you ask them nicely.

2. Describe your pictures

There is a description of this picture in the alt-text.

The famous Peggy's Cove lighthouse. It's quite tall, and white, with the actual light casing in red. There are three windows going up on the side. It really needs a new coat of paint. In the foreground is grass and rocks leading up the lighthouse. In the background is just cloud. There's a storm coming in. Posted by Anna Overseas, on Flickr, description written by Anna

If you hover you mouse over, you’ll see it, because I also included it in the title text. However, it’s the alt-text that text-readers will pick up and read back to the use accessing your site.

You’ll notice that my description is not simply “a lighthouse in Nova Scotia”, but actually attempts to create an idea of what the photo looks like.

Some people put their descriptions in a caption to the photo. I don’t like that, although I think it’s a good way to raise awareness of the issue. If more people realise we’re describing images, maybe they’ll follow suit.

3. Make your link-text something relevant.

My least favourite link-texts are like this:

Click here for more information.

What’s “here”? What information will I get from “here”? Is this link-text at all helpful in determining what’s behind it?

A lot of text-readers allow people to ‘link hop’, and will just stop and read what the link-text is. If you don’t have link-text that actually tells people what’s behind it, someone needs to figure out where to go back to in order to get context.

When linking something, try and make the link-text be relevant. See this discussion for more information about link-text.

These last two are accessibility-related things that are relevant to me.

4. Don’t over-ride browser defaults for your text.

I have a degenerative eye condition (doesn’t that sound scary?) so small text that I can’t control, and lack of contrast between text and background makes it very difficult for me to read your site.

I know that everyone looks at things different, and has different web-surfing preferences. I know people have a “look” they want for their journals and blogs, and that’s all good. What I do when I go to sites with small text is I try and make it bigger so I can actually see it. For some websites, though, this becomes impossible. Don’t be that person, because I can’t read your blog.

5. Look at your blog in a different browser, at least once.

We all have our ideal browser, and we all know what our blogs look like in that browser, and it’s perfect. However, for reasons that completely escape me, the same html code will look very different in Firefox than it does in IE, and it won’t necessarily occur to you until you look at it. For example, when I signing up with a group, I had to look at their website (which looks lovely in Firefox) in IE at work, and suddenly I couldn’t find the links. The colours, which were completely viewable in FF, blended into the perfectly-chosen background in IE. The webmaster, who really hates IE, had never thought to look at it.

For another example, when I look at FWD/Forward in IE, everything looks like it’s in bold, but in Firefox, it doesn’t.

At least with blogs, you’re usually just updating content, not layout, so you don’t need to look at another browser all that often. But do try, and then do whatever you need to do to the HTML to have a “good enough” look in the browser you don’t use.

Extra Bonus Points:

There’s this great website: WAVE: Web Accessibility Evaluation Tool. Wave allows you to put any URL in and it will tell you if you have any glaring accessibility issues. It won’t evaluate everything I’ve talked about here - WAVE can’t tell you to put in some transcripts, for example - but it can be very eye-opening.

For example, here’s a WAVE report for the Conservative Party of Canada, this is the WAVE report for the NDP, here’s the WAVE report for the Liberals, and this is the WAVE report for the Green Party of Canada.

I’ve had representatives of all of these parties assure me that they prioritise the concerns of people with disabilities.

I leave you to judge that for yourself.

[Here’s the WAVE report for the Bloc Quebecois. They don’t run in my riding, so I haven’t asked them about people with disabilities.]

But! Putting aside the fact that people are actually paid to put up websites for major political parties in Canada, I hope that these simple tips will make it easier for the average “in my spare time, between everything else I do” blogger to make their blog a bit more accessible.

If you don’t have a blog (or even if you do!), take a look through the Bitch website. I’ve been chatting a bit on email with their webmaster, and I know she’s interested in ways to make the site more accessible. Maybe together we can make a list of things that don’t really work in terms of accessibility for the site, and make some suggestions for improvements. (With the understanding, of course, that the Bitch website team has a lot on their plate right now, and some of changes may require a great deal of work that isn’t feasible for them at this time.)

Some Further Reading, and posts that have influenced my thinking on this matter:

Nerdy PSA: Accessibility Tips for the Casual Coder by Hope
Making Accessible Blog Posts by Sasha Feather
Accessibility and Graceful Degradation at Web Lessons
Making Accessible Posts for Screen Reader Technology, by Sasha Feather at Access Fandom

by Anna Pearce
View profile »

Get Bitch Media's top 9 reads of the week delivered to your inbox every Saturday morning! Sign up for the Weekly Reader:

7 Comments Have Been Posted

One of the most challenging

One of the most challenging things about designing accessible websites is that many browsers render sites differently, as discussed above. The different look of the text on FWD/Forward, for example, is a direct consequence of the difference between the way IE and FF handle weighted fonts. The font is supposed to be a midweight font to accommodate people who have trouble reading fonts which are more lightly weighted, and unfortunately, neither browser renders it properly.

You are left with a choice when balancing the needs of multiple browsers (including phones) as you try to hit the sweet spot which most people can read, and even then, it doesn't always work out. FWD/Forward, I would note, also has a font resizing tool which users can use to quickly and easily adjust the size of the text on the site, and I wish more websites had this option (for those who don't know the ctrl+ trick).

Another issue which comes up at FWD and other sites I've worked on is that often, accessibility needs conflict. Some users need large, heavy text. Others find large, heavy text unreadable. Some users need site elements designed one way, others find those elements completely unreadable. Some of us need black text on a white background for high contrast to read, others need white text on a black background.

And so forth. Often, a step taken to increase accessibility inadvertently makes a site more inaccessible to someone else. Which is why I'm a big fan of sites with controllable visual elements; for example, we're working on an adaptation of the FWD theme which reverses the color scheme for people who need white text on a dark background to read comfortably. Obviously controllable elements are not the only solution; there are fundamental display issues which need to be thought out and built into the design (being able to resize text, for example, isn't really helpful for people using screen readers).

I'd also note that a huge part of accessibility for websites is ASKING YOUR READERS what you can do to make a site more accessible. And responding to them; if someone says "I can't read your site" or "I'm having problems with XYZ," say "we will look into that and try to implement it," and if you can't for some reason, explain why. Let your readers know that you want to hear from them and you will take accessibility issues seriously.

There are a number of sites I have stopped reading because they are not accessible to me and the site owner never responded when I politely asked for accommodation. (Needless to say, I don't link to these sites either.) In other words, people, inaccessibility makes you lose readers.

Anna already said this.....

...But we would love to get feedback from folks on the accessibility of Bitch Media's website. I'm already aware that we don't have nearly enough transcriptions and don't use alt text on a regular basis, but I think making a list of other possible improvements for the future is a great idea.

Kjerstin Johnson
Web Content Manager

Subscribing to comments

Another thing that would make the site more usable for me would be a simple mechanism to subscribe to comments (on particular threads, and globally) via RSS or email - or preferably with a choice.

Thanks for the link to the WAVE tool!

I work in web development at a university, and we been bad about things like alt text and "click here". (We are pretty good about #5, though!) I used the WAVE site to go through the departmental sites that our shop has built; I'll be making some changes as best I can. We will definitely be keeping these tips in mind as we do redesigns, and we will try to educate the people in the departments who update the pages as well.

Not the best with technology

so, i did the Wave thing with my blog, and it says there are two accessibility issues, but i can't tell if it in any way tells me just what those issues are. basically, the Wave "test" isn't giving me useful information so i don't know what is wrong, and there's a very high chance that i wouldn't know how to fix it if it's anything outside of what has been mentioned in this article (all of which are suggestions i was familiar with already, fortunately). so, how the heck do you "read" the Wave evaluation???

Wave icons

There should be little red, yellow, blue, and/or green icons that pop up on your page - hover your mouse over them to find out what they indicate. Also, the "help" link on the upper right of the Wave page has more info (as do their other links along the top of the page).

Thanks a lot for the great

Thanks a lot for the great post! I've been looking for a good guide on making my blog popular. I have to make a confession that I didn't expect to find something special from your article, because Bitch isn't a seo dedicated resource, but I'm pleasantly surprised. Very informative and very useful! I will definitely come back here for the great stuff. Keep it up and thanks once again for sharing your ideas.

Add new comment