Tag Archives: accessibility

Screen readers 1, humans 0

Spoken version: MP3 | OGG

Yesterday I sent out a one-question survey on Twitter about screen readers. I’d had this fantastic idea for a website plugin that would enable blog editors to easily record an audio version of their blog posts when publishing [1]. Vision-impaired users would rejoice, website traffic would shoot up and I’d be rich and famous. To double-check, I asked the following question which was retweeted and replied to by several kind souls:

I expected replies along the lines of “stupid question, of course a human recording is better but we have no choice”. How wrong I was.

If you’re not sure how a blind or low-vision user can “read” a webpage, listen to the following short video showing a screen reader in action.

When I’ve seen friends use screen readers it’s always struck me as sounding difficult to understand and likely to get annoying after a while. Where’s the warmth or personality in that mechanical voice?! But I was enlightened as to how incredibly empowering this technology is and the replies I got were pretty unanimous — screen readers win hands down.

Benefits of screen readers

  • Ability to control such as jumping forwards, backwards or elsewhere in the page
  • Ability to check spelling
  • Ability to listen by word
  • Ability to change reading speed (humans are too slow)
  • Ability to follow links

Some of these are also possible with JavaScript, e.g. changing the speed of an audio file, but it would add an extra UI to the interface that the user is already familiar with. I suppose it’s similar to my beloved Kindle — I now feel the limits of books printed on paper compared to ebooks with their dictionary lookups, highlighting, linking, etc.

The only non-unanimous opinion was for fiction where a human narration is sometimes preferred for continuous reading and to feel emotion.

So another day older, another day wiser and thanks to everyone who sent comments.

Footnote

  1. When editing a blog post, it should be possible to use getUserMedia to record the audio, send that to the Web Audio API and export it as a WAV file using the Recorder.js library. Then get the WAV file transcoded to OGG or MP3 via an online API such as Encoding.com (no affiliation) and uploaded to cloud storage. The resulting URL could be inserted into an audio element at the top of the blog post, a bit like this one.

Blocking comment spam without captchas

Spam block imageImagine you want to leave a comment on a blog. Next, imagine you have to solve one of those captchas — a jumbled image of letters and numbers — to prove you’re human. Now imagine that you can’t see. You have to solve an audio captcha instead, such as the ones below. All you have to do is work out what the sequence of numbers is in each one:


MP3 | OGG


MP3 | OGG


MP3 | OGG

Rather tricky, huh? And these are genuine examples, not edited or downsampled.

Like most people, I needed a way to block spam on my WordPress blog but I refuse to use captchas. Spam is not my readers’ problem and as you can see, captchas are an extra hassle for everyone. Hard for people with good eyesight and even harder for people with poor or no eyesight (which includes all of us at some point in the future). Clearly we need to find a better alternative…

Question-and-answer captcha

These are of the form “what is two plus seven?” or “in which season do leaves fall?”. With text like this a blind person can hear it with software called a screen reader, which is good, but it has to be in a language they understand, which is not good. My blog is in English and Japanese so this a problem. There could be multiple answers, too; leaves can fall in the autumn or in the fall.

An extra form field hidden with CSS

This involves a field that should stay empty, possibly with a message saying “leave empty”. The idea is that spam bots will automatically fill in every field they come across but humans won’t. CSS can be used to hide the field from humans but it’s still “visible” to screen reader users or those with user styles applied (or none at all). Also, I tried this out for a while but in practice it wasn’t very effective — the spam bots are too smart.

Third-party spam-blocking service

Akismet is the most widely-used but there are others. They work by sending each comment to a remote server where it is analysed and classified as spam or genuine. This method seems to be effective but you have to register and possibly pay depending on your spam-blocking needs. It’s also not ideal in an environment where comments should be private.

IP address blacklists

Whether using your own list or somebody else’s, it’s easy to block comments from IP addresses that are known to send spam. I don’t like this for two reasons, though:

  • Several users can share a single IP address, for example through a VPN, or spammers could be sending comments from a machine they’ve secretly gained access to. I don’t want to penalise innocent users.
  • Looking through some of my spam comments I couldn’t see any from the same IP address so I doubt this approach would be very effective.

The answer?

Then I came across some spam bot research and a nice way to block them by Ned Batchelder (and probably others too). As most spam comments are sent rapidly from remote servers, we can add a unique token to our comment form and then check it’s still there when a comment is posted. I tried this and sure enough it blocked about two-thirds of spam — still room for improvement but it’s a good starting point. After much tweaking and experimenting I found that further analysis of a comment could catch most of the remaining spam, such as the delay between page load and posting, the ratio of text to links and the similarity of comment text to blog post text. Finally I’m satisfied. Out of the last 100 spam comments on this blog, 98 of them were detected and blocked by the filter. It’s not quite perfect and it may become less effective over time but I’m happy to make that compromise and keep my readers happy.

I’ve put this together into a spam-blocking plugin for WordPress and you can see the source code here. It’s designed to be invisible for users and maintenance-free for site owners. If you try it and like it, please give it a nice review in the WordPress directory so I can get that warm fuzzy feeling!

UPDATE

Since writing this I’ve seen spam increase again despite my plugin. I was going to try to update it but I’ve since discovered (thanks Otto) another WordPress plugin, Cookies for Comments, which is much better and works using a similar concept. This is my recommendation for all WordPress users.

Accessible child theme for WordPress Twenty Twelve

Quick summary: I made an accessible child theme for the default WordPress Twenty Twelve theme. Read on for details.

Accessibility in WordPress

I recently switched my blog over to WordPress — self-hosted to give me more control. So far I’m impressed, especially with the number of plugins and themes available, but I was a bit surprised at the lack of themes that claim to be accessible. At the time of writing there are 1,741 themes in the official repository, only 5 of which appear when searching for “accessible” or “accessibility”. Not good. But there are some positive signs:

It was the write-up by Rian that helped me make a similar child theme for Twenty Twelve, the current default WordPress theme. Out of the box, it seems pretty good already and a big improvement over previous versions, but I felt there were a few tweaks that could be made. Below is a summary of what I’ve changed or overwritten.

Child theme changes

style.css

  • Force underline on links but remove links on hover/focus (to clearly indicate a selected element).
  • Increase contrast in buttons, links and other text (for low-vision users and situations such as outdoors on a sunny day).
  • Remove automatic hyphenation (to avoid strange pronunciation with screen readers).

header.php

  • Remove link around the site’s title and banner image when front page is viewed.
  • Only show the description heading if the site description has been set.

content.php

  • Change headings in post lists from <h1> to <h2>.

footer.php

  • Add a “return to top of page” link in the footer.

Accessible OneTwo ThemeI’m not an accessibility expert but I think (hope!) these changes improve the browsing experience for all users. The theme itself is available for download from GitHub where I’d love to receive suggestions for improvements, or alternatively in the comments below. Incidentally it’s also been submitted to the WordPress theme repository as Accessible OneTwo so hopefully will be available to a wider audience in future.

Inaccessible

A little song dedicated to Henny, our team’s queen of accessibility.
UPDATE: Make that Jack Pickard as well. A much-loved accessibility expert, now much-missed.

Jeff Allen‘s clever song rewrites led me to have a go myself.

Video URL (with captions): http://www.youtube.com/watch?v=S9i1vNnh1hg

Downloads

For your downloading pleasure, here are the video and audio–only files:

License is Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported. If you need a media player, I recommend VLC.

Lyrics

Inaccessible, that’s what you are.
Inaccessible, to a screen reader.
Like an art museum with no access ramp
you’re losing hits and dropping Page Rank.
Never before has a website been more…

Inaccessible, in every way,
and with no updates, that’s how you’ll stay.
That’s why, webmaster, it’s incredible
that a site so inaccessible
thinks that I won’t find another site soon.

[spoken]
Images should have alt tags (text)
and keyboard users, can they tab through your page?
If not, why not?
[end spoken]

Like never before,
with plugins galore.

Inaccessible, that’s what you are.
Inaccessible, pushing people afar.
I’ve got no official disability
but your site, to me, is a mystery.
Hope the next site is not
inaccessible too.