A real world example of how your inaccessible website could be costing YOU money.

It’s Cinco De Mayo (May 5) as I write this. I got an e-mail notification about a special one-day sale from a company I’ve purchased sound reinforcement equipment from in the past. It looked like there might be some pretty good deals available. I’m keeping an eye out for a light-weight P.A. system that would give me a little more oomph than the one I’m currently using,  so I went to their website to take a look.

If I’d been successful in “looking around,” with my screen reader I wouldn’t be writing about my experience.

I was encouraged when their home page included an accessibility link. I clicked on the link and was further encouraged when the page included options to select browsing with a screen reader. I checked this box. It also included options to select keyboard navigation. I checked this, as well. While I didn’t check the boxes, the accessibility options included magnification, gray scale for the display and some other options that a totally blind person wouldn’t use, but that a vision impaired user would appreciate. I clicked “okay” and Jaws, my favorite screen reader told me that the accessibility options were engaged.

I clicked on the “sale” link and things went downhill from there. As expected, there were tons of choices and filters. Since I didn’t want to browse through over 500 sale items on 24 pages I tried to use the filters. Every time I checked a check box in the filters the page refreshed and Jaws would go to the top of the page and start reading from top to bottom. I tried the keystroke that takes me straight to check boxes, but it didn’t take me anywhere. The website seemed to be set up in lists, but the lists didn’t take me back to the filter area where I could go through the various options again. I tried navigating with headers, but the headers just seemed to be the company profile, social media section and the main navigation section. With great difficulty I found my way back to the filters and went through this laborious process several more times, trying to get the website to display the specific items I was interested in buying.

After 40-45 minutes I finally got some actual products to consider. It wasn’t quite the list I wanted as it only included one brand.

The website designer had thoughtfully labelled each product with a header so I could go from product to product with a press of the “h” key. I didn’t find what I was looking for on this list, but I was done wasting time on this website. It was obvious that the company had spent some money to try to build accessibility into their website. However, what they ended up with was a hot mess that probably meets current guidelines for accessibility, but doesn’t work very well for a potential customer using a screen reader.

This company has a toll free number I could have called, but that would have involved a long conversation with a customer service representative explaining that I was interested in buying a light weight P.A. system. There are brands I like and other brands I’m not interested in. I’m looking for a certain power level, speaker size, a system with actual knobs, one with at least basic reverb… You get the point. It would have been a pretty long phone conversation that might, or might not have lead to a sale. I just don’t feel like wasting the CSR”s time or any more of mine. Needless to say, the e-mail is in the trash and I’ll look at buying what I need from someone else.

Accessibility suggestions from someone who uses a screen reader

Consistency is the answer. I prefer headings best because you can put them at various levels and get down to specific content quickly. Lists are somewhat helpful, but when you get to the top of a list it just says “list of X number of items,” so you have to arrow down through until you know what it’s a list of.

The biggest problem with this particular site was that something was causing it to refresh every time I checked a box. It’s so much easier if I can arrow or tab through the check boxes, making my selections, then click on a submit or accept button. Ideally, this would generate a list of items that could start with a heading at level 1 so I could find it quickly, with each product at heading level 2 so I could easily go down through the list of products. The headings should be a link to the page where I can read about that product, and purchase it.

Interestingly, the site I’m talking about does this. Also interesting that the accessibility page allowed me to tab through the check boxes, check what I needed and then click okay. That’s exactly what all the check boxes should do, preferably with the okay/submit button right after the check boxes. I’ve seen sites where the “accept/submit” button is somewhere else on the page. It could be at the top, the bottom or somewhere else entirely, making it a challenge to actually filter the products.

___________________________________

Thank you Rob for your first hand experience!

As you can see, even a website that has done their best to implement some digital accessibility standards in their ecommerce site falls short. One of the reasons this occurs is because businesses or organizations fail to take into account what an actual user experience may look like for someone that utilizes a screen reader. Having Rob as a member of our team as our accessibility partner will help the team here at S. Barnes Designs avoid some of these pitfalls. – Shawna