Anthony Lawlor

Common Yet Easily Fixable Accessibility Issues I Encounter on Most Websites as a Blind User

Imagine you are really excited about doing something online, such as buying that shiny new gadget, those concert tickets you’ve been waiting for, or those plane tickets that finally came down in price so you can go on that much-needed vacation you’ve been waiting for. Today is the day when you can finally make that purchase. You hop online using your device of choice, log in, open up your preferred web browser, navigate to the site, and…

You can’t read any of the buttons or links. The images are just black squares, and all the text looks exactly the same—no larger text for headings, no bold or italic font, nothing. The page is just a wall of text with random black squares where images should go. Blank buttons permeate the page, their purpose a mystery that could bring success or epic failure as you roll the dice on activating them.

This nightmarish scenario is all too familiar for those of us who are Blind or visually impaired and rely on assistive technology (AT) to perform daily digital tasks.

Those customers who don’t need assistive technology to access the web would snatch up those tickets, the last of those gadgets, or the last cheap plane ticket while those who need to use assistive technology are still pressing all the blank, unlabeled buttons to see what they do, arrowing around the page frantically, smashing their keyboards against the wall, etc.

To make this scenario even worse, this is all easily avoidable and fixable.

Assistive technology, such as a screen reader, is designed to understand standard HTML. That means that if AT can’t interpret a button, link, or other standard HTML element, someone has broken it, so AT users can’t use a web page as intended.

What’s more, even if some developer made an element inaccessible, we have a sort of digital duct tape to fix such issues. Enter ARIA.

ARIA (Accessible Rich Internet Applications)

ARIA gives us handy HTML attributes we can put as duct tape over the leaky pipes and broken support struts that make up a web page. Oh, and this duct tape is invisible to everyone except those who use AT.

I have been using a screen reader for almost thirty years and have really seen some stuff (no pun intended).

Like nearly all screen reader users, I have been that person in the mentioned scenario many times.

It did use to be way worse decades ago of course; pages would need to refresh when you are in the middle of reading a lengthy article for school, throwing your screen reader focus all the way back to the top of the page, searching for a “download” or “submit” button in vain because the aforementioned element is an animated image with a JavaScript function that is only looking for mouse clicks.

Headings

Another accessibility problem I used to see all the time was a web page that did not have any headings.

Screen reader users rely on headings to provide structure to a page. You can quickly jump around a page that has properly marked-up headings. Without them, you have to press up and down arrow keys ad nauseum until you find what you are looking for.

Mostly, it is the websites not owned by a large group, such as personal pages that may not have headings. If I get to a web page and I hear my screen reader say “no headings available” when I press the ‘H’ key, I’m noping out of there in a hurry.

Luckily, the rise of CMS (Content Management System, like WordPress) has helped with this since their templates typically have headings, albeit not in a logical order, but they at least have headings.

Now imagine a team of dedicated, talented accessibility engineers whose continuing mission is to seek out inaccessible content, explore strange, new websites, and boldly go where no team of accessibility engineers has gone before.

Such a team would share their values of equitability, access for all, and expertise in making the digital world accessible.

Imagine a world where no one has difficulty using a digital environment due to their ability. Imagine a world where typing just a few keys to label a button for screen reader users or putting a simple <h1> tag on a heading makes a world of difference in someone else’s life. Imagine that doing such a simple thing allows that person to purchase that fancy, new gadget, those much sought-after concert tickets, or that plane ticket to that dream vacation.