Making accessible blog posts for screen reader technology

[sasha_feather]

hope's post Nerdy PSA: Accessibility Tips for the Casual Coder is a good resource for how to make your blog or website more accessible for screen reader technology. Screen readers are tech that blind or sight-impaired people can use to read the internet (they read text aloud).

What I've done is bookmark this page and open it if I'm constructing a blog post in which I want to pay particular attention to access issues (say for instance one with images, but I try to do work on this generally, little by little). I also picked out a couple of things off hope's list of suggestions to work on, rather than tackling the whole list at once.

---

One in particular that I would like to see more of is descriptive links. Personally I'm much less likely to click on a link if I do not know where it will lead me.

So a non-descriptive link looks like: hey this is cool and pretty!

And a descriptive link looks like: Here is a cool photo on Flickr of some horses

The same link with a title tag: Photo of horses on Flickr (note how there is a text box that appears if you mouse over the link) ETA: See comments for why not to rely on title tags

Another thing to do is just tell the reader somewhere in your post where your links direct. For example. Hey, I like the movie Pitch Black (link goes to IMDB).

----

Here is the code for including a warning that is accessible for a screen reader. (Warnings are for posts/stories that have triggering content or triggering language).

(<a title="Skip this Warning" href="#skip">skip</a>)<span title="This is a spoiler. Highlight to read." style="color:#666;background-color:#666;">
Text-you-want-to-be-hidden-under-the-gray-bar
</span><a name="skip"></a>

which creates:
(skip)
Text-you-want-to-be-hidden-under-the-gray-bar


The "skip" link lets a speaking web browser stay silent about the warning.