Reprinted from an article written by Holly Tuke
These are the five most annoying inaccessible web elements I face as a blind screen reader user every day, and how to fix them. For blind and visually impaired people like me, accessibility is the difference between us being able to use a website and clicking off it.
How screen readers work
Screen readers allow blind and visually impaired people to use computers, phones and tablets independently. Most screen readers use software, and a Text To Speech (TTS) engine, which is what converts the text from the screen reader into speech. Screen readers convert the text displayed on screen into a format that blind users can process. Screen readers read out loud everything that’s on the screen and allow people to navigate using touch gestures and shortcut keys. They also work with other output devices such as a braille display.
As a screen reader user, here are the most common issues I encounter on a daily basis.
Unlabelled links and buttons Screen reader users rely on links and buttons to navigate around a website and to find the information we need. If links and buttons are not labelled correctly or if at all, then it makes it difficult for screen reader users to find the information they need. Ultimately, unlabelled links make it much harder to navigate the website easily, quickly and independently. For example, when linking to an about page, ‘click here’ doesn’t give any clue as to where it leads to, but ‘find out more about who we are’ is clear.
If links and buttons are labelled correctly, screen readers can read the label out loud. It means that blind and visually impaired people don’t have to press the link or button without knowing where it will take them. As well as unlabelled elements, links and buttons that do not have a clear description are also really frustrating. They must have a clear description of where they will lead to when pressed, rather than ‘click here’. Never make your users guess where a link will take them or force them into a trial-and-error situation. This makes for tedious user experience.
No image descriptions This is probably the most common issue I encounter when browsing the web. Using image descriptions is essential for accessibility. Image descriptions are also known as alt text (alternative text) which is a written description of an image. Screen readers read image descriptions out loud. This means that blind and visually impaired people can understand the content of the image in an accessible way. If images do not have alt text, then screen readers will simply say “image” or “graphic” which gives no context or meaning.
Images often convey valuable information. It’s therefore important that people with a visual impairment can access this information as well. Alt text should be clearly written and give an accurate description of the image.
Check out our tips for writing better alt text to ensure your images are fully accessible.
Poor use of headings For quick and easy navigation, many screen reader users navigate using various elements on the page such as headings. They are a great way to find the information we need quickly and effectively. Especially when they follow a logical heading structure with H1s, H2s and H3s helping to prioritise the content. If websites don’t use headings, it means screen reader users are unable to use the keyboard shortcuts to navigate through the webpage this way. If that’s the case, we have to resort to tabbing or arrowing through a long web page to find the information we need. Headings also help to break up the web content visually and improve readability. Other elements that screen reader users use to navigate webpages include links, lists or landmarks.
Inaccessible web forms Most websites use forms in one way or another. Whether it’s to help you search for a product or to get in touch through a contact form. However, when these forms are not labelled, or not labelled correctly, it means we cannot use them. For example, if a search box is not labelled, it means screen reader users have no idea of the purpose of that box. It means people who use screen readers cannot access the same functionality.
Contact forms are an effective way for customers to get in touch with your brand or business. And as a screen reader user, there’s nothing more frustrating than these forms being labelled incorrectly. Especially CAPTCHA checkout requirements. Without an option to hear the audio, it’s not accessible. It means we are unable to fill in the form independently. I often have to enlist help from a sighted person, but this isn’t possible for everyone.
Auto-playing audio and video
Most people will know how annoying it is to load a web page with noisy adverts that start playing suddenly. But for screen reader users, it can be even more alarming. When video or audio starts playing automatically, it can drown out the voice of the screen reader. This makes it harder to find the pause or stop buttons. (And if these buttons are unlabelled, then it’s practically impossible for me to stop the video quickly which causes extra frustration.) If I’m unable to stop the sound or video, I normally click off.
The solution? Make sure there’s no auto-playing video or audio when your website loads. If you really want to use video, make sure the audio is muted and the user can pause, stop or hide the media player.
These issues may seem small to sighted users. But they’re the difference between me being able to use a website independently or not. And they make a huge difference when implemented correctly.
Original article can be found at BigHack.org