Rian Rietveld is an authority in the field of web accessibility. For many years now, she has performed accessibility audits and shared her knowledge and skills by providing training for developers, website owners, and website editors.
On Twitter and LinkedIn I asked people without a disability what their biggest frustrations and hurdles are while using the web. And, this should come as no surprise, almost every problem or annoyance also is a common web accessibility issue! In this post I’d like to give you a broader view on web accessibility, who benefits from it and why you should bother. Spoiler alert: everyone benefits from an accessible web!
Nobody is perfect
We tend to develop and design for perfect people in a perfect environment: Young, healthy, energetic, smart, web savvy, in a quiet room, well rested, without distraction, without a hangover, with a coffee in hand and with all the time in the world.
But, are you that person all the time? Are you even that person at all? Chances are you’re not. Can I let you in on a little secret? Not a single person or situation is perfect, at least not all of the time.
Imagine yourself sitting on a train, watching a video, while the sun is shining on your display. Oh, and you also forgot your headphone. In this case it’s convenient that the site is well built, the colour contrast of the text is sufficient and the video has captioning. All these issues address web accessibility.
Don’t just take my word for it
I asked on Twitter and LinkedIn:
“Hey, I talk a lot about making the web accessible for people with a disability. But, if you don’t have a disability, what are your greatest frustrations and hurdles using the web nowadays? Doing some research and love your feedback :-)”
Read the Question and replies on Twitter and on Linkedin.
Hey Twitter. I talk a lot about making the web accessible for people with a disability.
But, if you don’t have a disability, what are your greatest frustrations and hurdles using the web nowadays?
@RianRietveldDoing some research and love your feedback 🙂
This turned out to be an invitation to ventilate a ton of irritation and hurdles people need to take to use the web. I grouped all the feedback by subject: Audio and video, forms, interruptions, performance and bugs, readability and user experience.
The top 4 frustrations:
- Unwanted interruptions: 28%
- Poor user experience: 19%
- Poor readability: 18%
- Poor form usability: 15%
Notice that these 4 issues are considered more important than poor performance or bugs.
Unwanted interruptions and distractions
The most frequently mentioned irritation was: unwanted interruptions and distractions. Pop-up windows overlapping the content you’re reading. Unrelated content asking for attention. And of course cookie consent notifications!
Gabor Javorszky sums it up quite nicely:
“Land on site. Accept GDPR cookie things (this takes about 5 pages because I can’t dismiss all non-essential because nothing is off by default). Then a popup about considering paying, 4 free articles left. Then intercom with an automated bot “we’re here to chat!!” Then a popup to subscribe to whatever newsletter.
If I haven’t quit until now, I’m then welcomed with a LOT of assets just being loaded… CSS file arrives finally? The entire page jumps as things rearrange. Font files arrive? Again a jump.
Oh, the ads have loaded… jump. Then another ad pops up in a picture-in-picture with video AND sound, and I can’t dismiss it because it takes me to whatever referral link they have.
Then the browser slows down due to some bad integration eating all of the CPU by Javascript.
Oh, and OF COURSE they hijacked scrolling. Not to mention that constantly changing either video background, or procedural moving background.”
Sounds familiar? When you enter a website with a specific goal in mind, it’s very annoying to be interrupted. A pop-up asking for attention, overlapping the content you were just reading. Chances are that people leave or forget what they actually came for.
@aardrianThe constant forms, modals, messages, chat prompts, permissions requests, etc. that I have to dismiss just to finish reading the headline.
@OvidPerlAll modals … all on the same page … all have to be clicked through before I can read.
@OvidPerlBiggest frustration: “Would you like to receive notifications?” “Can we use your location?” “Will you accept cookies?” “Please sign up for our newsletter…”
Summarized: Let me finish what I came for, I was reading that!
Cookie consent
Cookie consents are of course legally required in some countries. But the implementation can use some improvement. In fact, they also count as a distraction when they pop up as a screen covering overlay.
@javorszkyLand on site: Accept GDPR cookie things (this takes about 5 pages because I can’t dismiss all non-essential because nothing is off by default).
@onlinechris140Wrongly implemented cookie banners that don’t comply with the law. They not only disrupt you but still track you even if you don’t consent.
@PodiumbouwerWhen you set your cookie settings on one page and you click to another page on the same site, and you can start again …
How to reduce the annoyance about cookie consent?
- Don’t block the whole screen.
- Remember the settings.
- Respect the Do Not Track (DNT) browser options set by the user.
Form usability
At the top of the list: Password creation!
We use a lot of passwords nowadays and still have to come up with new ones regularly. One of the biggest annoyances when coming up with a new password, is not knowing the rules beforehand for creating one which will be approved. You try hard to come up with a new password or you use a generator. But when you press enter, a warning pops up:
Your password must
- be between 8 and 30 characters.
- contain at least one uppercase letter (ex: A, B, etc.)
- contain at least one lowercase letter.
- contain at least one number digit
- contain at least one special character like: $, #, @, !,%,^,&,*,(,) –
How many times have you screamed at the screen: “Tell me this beforehand!”?
@mdubbelmError messages that come afterwards and eventually don’t explain what you need to change.
@pmakholmSpecifically for webshops: “Ohhhh, you need to create an account … with a strong password … No, we will not tell you the rules up front”
@stommepoesTurned out my Keepass-generated password contained 1 special character they did not allow — which now tells me they likely use that character meaningfully in either URLs or their backend programs. They should not be leaking this data, lol.
And if you come up with a super strong complicated validating password, you are not allowed to copy paste it in the confirmation field.
@onlinechris140Being unable to paste a password
@cdilsIt bugs me when I can’t paste in a password. Don’t make me type 20+ characters.
Not being very helpful or flexible
Writing decent error messages is an art in itself. I can at least explain to you what’s not very helpful as an error message:
- “This field is required.”
- Only a red border around the field (not so useful when the user is colour blind)
- Or not writing anything at all, which leaves the user to guess what they did “wrong”.
@stommepoesRequired fields that aren’t marked required — if I think you don’t need my phone number, I ain’t giving it. Fields that don’t tell you they’ll consider your phone number invalid because it’s not in their preferred format.
@svnmthVague error messages
Performance and quality assurance
For a decent performance, a fast loading speed is essential. And many websites seem to fail here.
@RarstJS choking performance to a point of page freezing/mis-functioning (more so on mobile)
@tkraftnerWhen pages that could be just plain HTML & CSS are implemented in a way that they only work with JS on.
@juliankernWeb pages that take 15 seconds to load, even on a solid LTE (Long Term Evolution) or WiFi connection.
@LucPChanging vertical layout with async loads… Trying to click a link that -at moment of clicking- yanks down because an image got loaded is infuriating.
In my opinion over engineering is the issue here. A heavyweight framework you use for everything, even for small sites, because that’s what you are used to and it’s convenient.
Another example is homepages which are packed with heavyweight images. They use sliders, background videos, full size hero images, because that’s what the client wanted. Oh and let’s not forget it’s a trendy thing to do. A beautiful continuous animation made with JavaScript that turns on the fan of your laptop. Sounds familiar?
The waiting a visitor has to endure only to get a telephone number or e-mail address… Do we want to show off, or are we just too lazy to usertest or optimize for speed? Our goal should be to help the user!
Readability
Your visitor must be able to read what’s on your website. “That makes sense”, you would say. But readability is not always the first priority on websites so it seems.
How often do we see small font sizes or fonts which are difficult to read? Poor colour contrast of text against its background? White text on light images? Well, because it’s so pretty!
@mjgoldsmithI don’t have a “traditional” disability, but I have never had the best vision, and I’m only getting older. Tiny, light gray text makes me bonkers. And Apps on Android that can’t handle that I’ve changed my font size preferences are the worst.
@stommepoesText which *technically* passes the WCAG minimum contrast of 4.5:1 but the font is SuperTwiggyThinExtraAnorexia Light at weight 100 and my browser is like “hell yeah I support web fonts and font-weights, let’s go!”
Besides actually being able to read the content, the way you read can also be difficult. If text is small we zoom in. When we get older Ctrl + or Cmd + is our friend. And then things overlap, multiple scrollbars appear, text becomes unreadable because it partly disappears beneath an image or is just too big for it’s container.
@wilcofiersSites that cause horizontal scrolling when I zoom on my phone. And sites with lots of sticky headers / sidebars that when zoomed take up more space than the actual content area.
Content written for SEO only
Content which is written for SEO only, happens when the goal of a website is not to inform the visitor, but to make money from ads. Perfectly legal, but super annoying for the visitor who actually was looking for information.
@sambulanceToo much unnecessary content within a post that is not actually relevant.
@bpowell42Blog posts described as recipes. I don’t want to know the story of how the recipe was discovered while backpacking Europe!
@tkraftnerSites that instead of getting to the point just keep on babbling marketing blah that “tries to evoke emotion” but basically says nothing at all.
A good example is this hilarious, but recognizable Twitter thread from Ben Brignell about Googling how to cook a roast chicken. Note: Twitter needs to fix its announcement of emojis. Sorry screen reader users, for that extra chickenhead clutter. If the goal of your website is to inform your visitors, write for them and the search engines will follow. Yoast provides excellent information on how to do that in SEO Copywriting.
UX: Information structure and navigation
Unfindable information
Check your website. How fast can the visitor find your contact information?
Tip: Add your country to the address. Not everyone knows you are based in the USA when your site is in English. It could also be for example Canada, New Zealand or the UK.
@michelleamesMissing information. If you’re a restaurant, for example, show me your hours. Give me a phone number.
@PodiumbouwerUnfindable information and search functionality that doesn’t work.
Form over function is not the user friendly way to design. Determine the goal of your website. Is it to show off your design skills?
@tkraftnerSites where you notice immediately that all effort has been put into eye-candy, but hardly any into the content.
Usability
Should we make decisions for the user on how they use a website?
@roelvangilsI gave this some extra thought. I think my biggest frustration is the overall inconsistency of the web. No website looks or behaves the same. This is especially frustrating when looking for government information. Except if you live in the UK 😉
@svnmthAny fancy thing made for desktop but working really badly on mobile.
@sambulanceNot being able to cmd+click links to open in a new tab
@svnmthPages that hide necessary features on mobile devices, and don’t let you choose/use the desktop version on mobile
@PodiumbouwerGetting the message on mobile: “Click here for our app”.
Video and audio
Autoplaying of audio and video is annoying. Because of the lack of captions and transcripts, users may skip the video or podcast altogether.
@redcrewNo transcript for podcasts and no captions on videos
@PINKbyPuckOh, and videos or even worse, ads with sound that just start. With many tabs open I’m always searching where the sound comes from.
@javorszkyThen another ad pops up in a picture-in-picture with video AND sound, and I can’t dismiss it because it takes me to whatever referral link they have.
@abrightclearwebVideos that autoplay and when you ignore them, they appear in a mini window that you then have to click a close link to dismiss.
And now for the fun part
The web content accessibility guidelines (WCAG) cover most of these issues.
Really, they do.
Let me explain by listing the link to the specific WCAG version 2.1 level AA success criteria with each item mentioned above. These are the current global standards for web accessibility. Please take some time to read them in the Quick Reference Guide.
Interruptions and distractions:
Form usability:
Performance and bugs:
Readability:
UX – Information structure and navigation:
Video and audio:
It seems that following these guidelines is beneficial for all web users.
Can we fix the web?
Is the web broken? Yes, if we keep going the way we have been.
Can we fix it? Yes, we can.
Stop to create for perfect people, start developing and designing for real people. For people like you and me. Oh, and for that one blind guy who obviously tried to visit your website and left because he couldn’t use it.
Have a proper quality control strategy in place, user test your forms, optimise for performance. Take pride in your work.
Yes, it takes more effort. But the end result will be so much better and sustainable.
Nobody is perfect.
