Webdev: Don’t Shut Your Site to the Blind

Posted By Lamont Wood in How To, Lifehacks, Lifestyle, Tech

BreakingModern — Websites with a ton of color and pop are great — unless you’re blind. Then they’re a cruel joke. And while the web offers the blind potential access to oceans of information previously denied them, the fashionable reliance on flashy graphics by website designers threatens to slam their virtual door.

As it turns out, there are a few rather minor steps that designers can take to assure at least some elemental accessibility.

Basically, the blind use computers with software called screen readers — which do just that, read the text on the screen using a synthetic voice. Pictures are not text, and the screen readers cannot perceive their content, so whatever is portrayed in those pictures may as well not exist for them. Fancier screen readers have optical character recognition (OCR) functions that may or may not work on a given file. (Some blind users employ Braille devices that output the text via raised pins. The same issues apply.)

There are several simple and straightforward ways to address the situation, which anyone who has a website might want to make sure are done, if not out of basic courtesy then out of a fear of future accessibility lawsuits.

Accessibility with ALT image tags, headers and CAPTCHAs

The first is to make use of the ALT attribute of the IMG and AREA tags in HTML. If that sounds like geek-speak, let’s explain that the IMG and AREA tags are used to control the display of images and maps on a webpage. The ALT (for “alternate text”) element contains the text that will be displayed if the graphic cannot be shown. In theory, its text should provide the information that the graphic would provide if it could be seen.

Note the screenshot below, showing the “Alternative Text” box for this article:

The screen reader cannot display the graphics so it reads the ALT text, and all’s right with the world.

But usually the ALT tag is blank (or absent) and the screen reader reverts to reading the file name, which is usually distracting gibberish. Yet, composing the ALT text would take maybe a whole minute.

While we’re on HTML and geek-speak, remember to use the HTML header tags (H1, H2, etc.) to organize text, rather than cooking up equivalents with small graphics. Without header tags the screen reader will see a page of text as one run-on word salad.

Once you’ve caught up on your ALT text and headers, the next step is to re-think the use of CAPTCHAs — those pattern recognition puzzles often seen on e-commerce sites, used to prove that the user is not a bot there to take over the site. (CAPTCHA stands for “Completely Automated Public Turing test to tell Computers and Humans Apart.”)

CAPTCHAs typically ask the user to identify distorted letters, something that machines are not supposed to be able to do (routinely). Blind people can’t do it either. The more progressive sites include an audio CAPTCHA which a blind user who knows is there might be able to wrestle with. But why a CAPTCHA has to be there at all remains, in many cases, a mystery.

Buttons and PDFs

Beyond that, if you are posting a PDF file of, say, a menu or brochure, make sure it is the PDF version of the original text file, and not a PDF of a scanned image of a printout of the original file. The use of the latter is surprisingly common and will, of course, defeat the screen reader.

If there are animation files make sure the buttons are labeled. Yes, blind people use them.

Finally, you might want to test your pride and joy with a screen reader. Even if you follow the rules, you can still end up with a mess. For instance, if you used countless tiny graphic files as spacers, the screen reader will read each one.

A screen reader called NVDA (Non-Visual Desktop Access) can be had for nothing and will be fine for testing, if you don’t mind the noticeable Australian accent of its synthesized voice. (It’s from a Down Under non-profit.)

For BMod, I’m Lamont Wood.

First/Featured Image: By Mitchfeatherston (Own work) [CC0], via Wikimedia Commons

Screenshot: Daniel Zweier

Header Image: By Marcus Quigmire from Florida, USA (Light In The DarkUploaded by Princess Mérida) [CC-BY-SA-2.0], via Wikimedia Commons