Making Your Blog Accessible/Disability-Friendly

I wrote this for the Chronic Babe Bloggers group of the Chronic Babe forum and used to refer everyone to it there. Now, however, you have to be a Chronic Babe member to see content in the forum, so I’m posting a slightly revised version here. I hope you find it useful.

This is now pretty comprehensive and should answer most of your questions. If you have further questions, please see if they’ve been asked in the comments. If not, ask away!

Basics

I recommend starting with this “five easy step” guide on a Bitch blog that covers things like text descriptions of images, transcripts for videos and vlogs, making link text relevant and more clickable (a very easy step to take), and 2 browser issues.

Also, the comments section of this blog has most of the other things I wanted to present, although I would do it in a “kinder, gentler” way. 😉

And, want to get comments? We all love comments! However, many people are unable to leave comments at blogs if they have word verification/CAPTCHA. Please disabled this feature on your blog! Here is a post about it from Dog’s Eye View.

The look (and sound) of the page

In general, avoid intense graphics, colors, especially anything moving or flashing. This can trigger migraines and seizures in susceptible people, for instance. I am one of these people. Even if it doesn’t trigger a complete migraine, it can make me nauseous so I can’t read the page, and I flee.

So, it’s best not to use “high-saturation” colors, especially really bright colors that are really attention-grabbing, like yellow or orange. (That’s why yellow and red are used in traffic lights, because they really catch your attention. You may want to capture people’s attention with your blog, but it’s better to do it with your writing than to have them distracted by, or have to leave because, your graphics.) Muted tones are best.

AVOID anything moving or flashing. If you really want something that moves, it should be something that people can click on, so they have a choice.

Likewise, with music. Noise, music, sound can all be problematic for people with a variety of disabilities. For example, for those who use screen readers, the music is competing with their text reader telling them what else is on the page. For others, it can provide unbearable sensory overload. If you want to have music on your blog, don’t have it play automatically when someone opens the page. Instead, have something that says, “Click here to listen to (name or style of music).” It can make a big difference to people if it’s classical/instrumental or if it’s techno, for instance. (There are psych disability issues, sensory, and neuro disability issues, for example. Also, for blind people who use text readers, their text reader is then competing with the music, and they might not be able to navigate to the “off” button for the music.) For me, I go into sensory overload if I open a page with music, and because of the panic this causes, I sometimes have trouble even closing the tab because I get so disoriented. I have just shut down my computer in some cases because my cognitive issues interfered with my ability to find the “off” button.

For font, think LEGIBILITY. These things are mostly for people who are blind or low vision, but some of them are also useful for other disabilities.

This is an example of an accessible literary journall I helped create several years ago.

You’ll notice that it’s very readable, but it’s also, IMO, very attractive. It’s pleasant to look at, but simple and clean. I’ll get to aesthetic stuff later on. For now, I’m focusing on font and related issues.

Where you have control over it (some sites allow you control over font style and size and some don’t), you want to use:

1. At least 14 point font.

2. Sans serif font. (Sans serif fonts include Ariel, Helvetica, Comic Sans MS; serif fonts are Times or Times New Roman.) Some programs offer you a “serif” and a “sans” version of the same font. In that case, choose “sans.”

3. Limit use of italics — they can be hard to read for some people with visual disabilities. Or, if you want/need something in italics, you can also bold it, and that makes it more readable.

4. High contrast between text and background. This means either use a dark background and a very light font, or a light background and a dark font. I, personally, am totally unable to read or even look at anything with a black background, so my preference is light background and dark font. People who need white-on-black can usually set up their computer with that form of high-contrast mode, but it’s not always possible to get an operating system that does it the other way.

5. High contrast between LINKS text and background. I visited a blog recently that had a very nice, lightly patterned, sort of bone/off-white background and a dark grey-green font. And then suddenly, in the middle of a sentence, the text seemed to disappear. When I looked closer, I realized it was link text, and it was in pale yellow-green, so it was practically invisible to me. I don’t even know how you choose link text color other than standard blue, but if you are making a different link-text color choice, please use something as visible as the rest of the text.

6. No patterning/wallpaper, or only very light pattern/wallpaper, behind text. Anyway, what you really don’t want is busy wallpaper behind your text. That’s a nightmare for low-vision visitors and for people with various neuro issues.

This is an example of a site that is NOT accessible: it has blue wallpaper with pictures of dogs and their names written underneath them. It’s like a visual/neural assault, for me, to try to use. (Even though I am very grateful to them for helping pay for my service dog’s chemo. It IS a great organization!)

Here are some examples of DO and DON’T:

Good: Pale salmon background with dark maroon text. (That’s what the Breath & Shadow banner and menu have, in Comic Sans MS font.) I chose those because I found them soothing/did not cause sensory overload, and because there is high contrast for readability. We got a lot of positive feedback on the look of the site, from readers with and without disabilities. A similar idea is dark blue or dark purple font on a very, very pale blue or purple background, which could also look nice.

Good: Black text on white background. OR white text on black backgrounds. Or black text on pale pink or pale pale green or pale pale blue or pale lavender background. You get the idea.

Bad:

• Bright yellow background with white font. (I have come across this!)
• Bricks (red bars with white stripes, like a brick wall) background with, basically, any font is bad, but even worse with a colored font.
• Pale background with pale font.
• Dark background with dark font. etc.

You can still have a beautiful and creative site AND accessibility. Try doing a google search for “disability rights blog” or something like that (disability studies or disability culture could also be good search terms), and looking at the blogs you find, and see if there are any that you like that also seem to fit the stuff above.

More resources on how to caption videos and vlogs….

If you have videos on your blogs, keep in mind that not everyone can see or hear them, but that you CAN still make them more accessible. For people who are Deaf or hard-of-hearing, you can provide captions. For people who are blind, low-vision, or deaf-blind, you can provide a transcript of the dialogue and the action in a video.

If you are using an English-language video without a lot of background noise, where the speaker is relatively easy to hear and understand, the easiest way to caption is to use Youtube’s transcript instructions. You write up a transcript in plain text in a document file on your computer, and then import that to Youtube, and their algorithm software matches the speech to he words and captions it that way.

Then, you can also take that transcript you already typed up and add in descriptions of the actions and put that up as a page at your blog and provide a link, and then anyone can access the action and words in your video or vlog.

If, however, your video has language other than English or there is a lot of background  or non-speech sound/noise, or if it’s signed, the youtube way doesn’t really work. BUT, there is a great site called DotSub. It’s at http://dotsub.com.

You can put up any video there — either your own or one you find elsewhere online (such as youtube) — and then caption it. DotSub provides a video tutorial that is quite easy to follow and directions that are pretty easy to understand.

While the site is intended primarily for allowing videos with spoken language to be  translated into another language, it also works well for captioning English-to-English or ASL (American Sign Language) to English, etc.

**Breaking News on easier captioning/subtitling options!**

I was having trouble with dotsub recently, so I started using Overstream. You can do very precise captioning this way, but it does require some work.

Then, I got this lead from the wonderful Savannah of Cracked Mirror in Shalott:

I wanted to add a resource for captioning/subtitling!

http://www.universalsubtitles.org/en/ is a great tool for captioning. it’s easy to use, and you don’t have to be the one to do the captions. You link to the video that needs captions and add it to the database, and then you can link people who can do captioning to the link so that they can transcribe and time captions for you. You can then review them and download the captions (or link to the page for that set of captions) and use them!

I recently did the captions for the Loud Hands Project’s Trailer- I’d already done a visual description (there’s no dialogue, only visuals, so that was done before the fundraising went live) but it was requested that the lyrics to the long used was captioned so I did it. You can see the resulting captions (Which have been downloaded and then uploaded to the youtube by the person running the LHP youtube account) at the following link: http://www.universalsubtitles.org/en/videos/mXR8a1CQgzOs/

You can see my account there- with some videos of mine and some I’ve captioned either for others or because I’ve wanted to use a video and it didn’t have captions- at the following link: http://www.universalsubtitles.org/en/profiles/profile/nicocoer/

Yay collaborative design for accessibility!

Thanks so much for reading this and for caring about web accessibility!

-Sharon