Skip to main content

5 most annoying website features I face as a blind person every single day

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.

Use our tips for writing better alt text to check the accessibility of your images.

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.

Logical heading structure begins with Heading 1, with Heading 2 sitting beneath heading 1. Heading 3 sits within heading 2 and so on.

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.

How to create a good heading structure for accessibility

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.

How to design accessible web forms

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.

More resources on screen reader accessibility

A message to web developers, from a blind screen reader user

Holly
Contributor: Holly Tuke
Organisation: Writer, The Big Hack

Contribute an article

The Big Hack is an open community, and if you have an idea, or an article, about how to make the digital world more inclusive, we want to hear from you.

Message us about a contribution

People are talking about this article:

  • David Rosenblatt 20th August 2020

    Hooly. This is very good info. can I reprint this in my blog as long as I attribute it to you? Would you want your email address listed also? or your twitter account only?

    • Daisy Bird 20th August 2020

      Hi David, thanks very much for your positive feedback on our piece. Please feel free to share with your network and on your blog, if you could include a link back to our site that would be super!

  • David Rosenblatt 20th August 2020

    Absolutley! Will do.

  • Guy Hickling, Accessibility Consultant 25th August 2020

    It’s worth pointing out that the first four of the above five points are all things to do with the most basic HTML. Things a developer learns in the first two or three weeks of a web dev course. Developers who don’t do these things should be ashamed to call themselves developers!

  • Peter Sears 28th August 2020

    Ironic how the image in the post doesn’t have any alt text.

  • Stacy 1st September 2020

    Something for web designers to keep in mind, not just for the sightless and/or visually-impaired but for all of us who are just one accident away from losing some or all of our vision.

    Thanks, Holly!

  • Chad Christensen 2nd September 2020

    Thanks for the great information Holly! In regards to alt text, in a scenario where there is a list of search results for books and the book cover is displayed on the screen along with the book title and author, would you say an empty alt attribute is appropriate? This is the advice I have seen doing some research on that scenario but would appreciate hearing what you think in your experience.

  • Holly 7th September 2020

    Thanks Chad! I’d say so, as long as the relevant information is listed elsewhere and is accessible. Your other options would be to mark the image as decorative, or just put something like ‘book cover’. Hope that helps.

  • Ryan 9th September 2020

    A useful browser plugin might be one that finds images with no alt-text and fires off to an image recognition service (i.e. Auzre) to generate the matched image description.

  • ChrisN 9th September 2020

    I’ve lost count of the number of web tutorials I have watched that say e.g. “Okay, we need a small text header here, let’s use an h4.

    Basic HTML is often ignored.

    A question: can screen readers voice the content of ‘title’ tags?

  • Vadym 9th September 2020

    I guess saying in alt that this picture is book cover is good enough, if you not have army of people to describe what is pictured there. On social networks (like instagram) neural net is analysing pictures and applying alts like “two woman on the grass”.

  • Frank Gomez 9th September 2020

    BUT most web “designers” are not developers and have no idea about basic HTML. In particular, they do not use headings properly.

  • Myron Pulier 9th September 2020

    Chad, I’d like to see what people have written advising an empty alt attribute. A helpful web composition environment flags such alts to maintain discipline that ensures at least rudimentary content. There’s a slippery slope here.

  • Shin 10th September 2020

    Safari allows us to stop auto-playing on every site.

  • Travis 10th September 2020

    Great article, I will definitely try to be more mindful of this when I develop.

  • Rich 10th September 2020

    I somewhat take issue with the second point above about describing images.

    In most cases, you want to use the alt attribute to describe the functionality (semantics) of the image, i.e. what is the meaning of this thing. In most cases, you don’t want to describe the image itself.

    For instance, if we have some sort of odd-shaped bullets in front of paragraphs, putting the word “bullet” in the alt attribute is enough; don’t use “red curcular bullet” or some such.

    If your images are redundant (see the question about book cover above), then null alt text (alt=””) is appropriate. For example, don’t know how many sites I’ve seen which have some sort of news feed where each story is introduced via heading containing the title of the article. Often this is preceeded via an image with altText similar or identical to the text in the heading. Again, null altText is appropriate here.

    SImilarly, if the page contains a list, say a directory, of persons in an organization and each entry is introduced via a photo of that person, avoid writing “photograph of John Smith” in the alt; simply “john Smith” is enough. Also, wrap the image in a heading tag to aid in navigation. Again, however, if the list already contains the person’s name in text as part of the entry, then put null altText on their photo.

    Of course, in some situations, on a site which features photographs or art or some such where the content of the images themselves is the main feature, then the alt attribute is a great place to write a description of the image itself.

    Hope this helps.

    — Rich, MIT Disability and Access Services

  • Omnilord 11th September 2020

    When I need to produce a web page, the lowest level test is going to the command line and opening the page with `lynx` or other text-based browsers and verify the content is Coherent. Anything that looks visually confusing in Lynx is guaranteed to be worse on screen reader. It’s not as good as a final pass on a real screen reader because if there is so much as an iota of JavaScript rendering any content, that content won’t show at all. But it’s a very good, very free tool to get started with comprehending accessibility first-hand.

  • meta hatton 11th September 2020

    being a reasonably well sighted person, this still feels like alot of good sense. the problem of inadequate accessability isn’t only affecting less sighted users, it is also a matter of cognitive assistance. although a well visually constructed page gives alot of useful cues for directing attention and providing contexts, the vast majority of pages i experience are still completely devoid of semantic certainty, which i require to stay focused.
    often halting the cursor over visual or reactive elements to give me the alt and link attributes also provides much needed hints for me to cognitively assess the item’s relevance and importance to my needs. furthermore various browser extensions and automated style modifications are absolutely dependant on these elements to function at all. any opportunity to fulfil the semantic space of a page is a much needed step to make these elements meaningful for every web user.
    the first thing i knew about the internet was how to utilise simple tags to give an otherwise plaintext document the ‘richness’ of .rtf, the rich text format. whenever this most basic formatting is obfuscated, the page fails the most basic of litmus tests, graceful degredation. perhaps more true to life than the popular notion that “if you can’t explain it to a five year old, you really don’t understand it”, if you can’t make the bare structure and content of the page meaningful, then perhaps web design isn’t an appropriate way to express it.
    thanks holly, for taking the time to remind us such design issues continue to be an invisible problem, and how needed the awareness is for others.

  • Ryan S 27th September 2020

    Fantastic insight, thank you.

  • special info dailymacho.com 10th October 2020

    Amazin!

  • Ruben Gutierrez 30th October 2020

    Thank you for your perspective, I’ll keep it in mind next time I’m making a website, You don’t really understand why you do those things like adding description and alt tags until you hear it from someone who has to deal with it every day.

  • Jesse R Beach 11th November 2020

    Thank you for this well-drafted and actionable list!

  • Japonia Portal 27th February 2021

    Well I really liked reading it. This post provided by you is very helpful for correct planning.

  • Wilmer Echols 13th April 2021

    It’s onerous to seek out knowledgeable people on this matter, but you sound like you understand what you’re speaking about! Thanks

  • Dysortografia 3rd August 2021

    Working every day by day I’m a lot more impressed by your post. Thanks for your personal efforts with expressing the following theme.

Leave a Reply

Your email address will not be published.

Was this article helpful?