Fangs Screen Reader Simulator for Developers

Accessibility - because the world wide web is supposed to level the playing field, not make it more difficult. So how do you design to make a web site accessible? Two key parts.

  1. Common sense links and jumps. You wouldn't want every page on the web you visited to read the entire navigation to you, right? So an example of common sense accessible design is a "skip to content" link that jumps over the nav to speed things up.
  2. Technical accessibility - can a screen reader actually "see" your page in an intelligible way? Remember how impatient you are? Why would someone who isn't sighted, or can't use both a mouse and keyboard simultaneously be any more patient? They aren't. For the same reason you aren't. And it is up to the designer to design for them, not for someone with different abilities to overcome crappy design.

The good news on accessible web design is it gets easier every year. The first step is awareness. And the lowest cost way to take the first step towards awareness is to simulate what your web pages built on Tendenci look/sound/feel/reflex like to those with different interfaces. Let me introduce you to FANGS and at the same time point out some serious shortcomings of our http://www.tendenci.com site at the same time. 

This is a screen shot of what our web page looks like to a sighted user.

Screen_Shot_2014-01-21_at_4.03.06_PM.png

If you aren't sighted then the market leader is willing to gauge you for 1k to purchase JAWS screen reader. How does $1095 USD grab you? Ridiculous IMHO.

Screen_Shot_2014-01-22_at_11.06.45_PM.png

 

You can download and test a 40 minute trial but we develop sites for a living so 40 minutes is comical when we are trying to help people. Hmmmm. Plan B. 

FANGS for Firefox add-on lets you simulate the experience and see what people have to suffer through to read, or to NOT read and bail out on your site. JAWS is available as donation-ware add-on for Firefox. This is how much I believe and support it.

 

Screen_Shot_2014-01-16_at_3.52.51_PM.png

 

What does Fangs do? It shows you your site like a screen reader would read it. Again - using our own site as an example, just picture yourself sitting there listening to a robotic voice reading this to you line by line. The good news is that FANGS is FREE. It's donationware. So as you can see I support the developer and appreciate their contribution to the open source movement and accessibility. But if you can't afford it, install it anyway as it is donation-ware and it's cool. The goal is to embrace accessible design. To get your message out and not make it hard for those with different abilities than you.

Three different views of FANGS.

1) View of page default via fangs. Using http://www.tendenci.com as an example (our site - we need to fix itk right?!)

Screen_Shot_2014-01-21_at_4.02.26_PM.png

OK that is ridiculous and doesn't work. So let's filter it and see if it makes more sense. Version two.

Screen_Shot_2014-01-21_at_4.02.41_PM.png

A little better. What about our third accessible option? 

Screen_Shot_2014-01-21_at_4.02.52_PM.png

Bottom line - if you are differently abled in your vision, you most likely will be forced to purchase JAWS. Which sucks when you think about the rest of us getting our web browsers for free. So the least we can do as developers is to do the best to make our sites accesssible.

Why this help file now when I've posted on this topic numerous times? Well, with boostrap and jquery and other frameworks, we are focusing so much on screens that we have forgotten that accessibility is baseline (I'm criticizing myself here, not you, but please don't make my mistakes). Level the playing field. And "Doctor, heal thyself" is the my biggest take away.

#peace