Accessibility issues are user experience issues
This is a follow up post with lots of examples which is intended as part 2 to my earlier post about what an accessible website is. It's based on this definition of an accessible website:
An accessible website is one that allows as many different people and devices as possible to interact with it
Then this happens:
#Hacker news readability
Hacker news is a very popular website among the developer community despite having issues with poor readability of text.
If you're on a VGA monitor then it's a terrible experience even for people with 20/20 vision.
Why not make the content as readable as possible? If I'm struggling to read the content then the site is inaccessible to me, and gives me a poor user experience.
We can't dictate what equipment our users will have so we have to compromise. Here's my solution to the problem:
Black text on a white background with a larger line height makes it much more readable. Users can now easily read the content, which is the entire purpose of the website.
#Lush.com text over images
If you're writing text on a web page, the intention is to have people read it. If you're placing text over images, Make sure you have a high contrast between the text and the image behind so it's easily readable. Otherwise why is the text there at all?
This example of a poor implementation of text over images is from lush.com:
I'm not arguing that you should never place text over images but that when you do so, you should make sure the text is as readable as possible. Nielsen Norman Group have published some useful guidance on this subject.
#Google chrome download
Notice there is not a valid
href on the link. The default behaviour of that link is to do nothing.
#What is the purpose of this page?
To avoid this problem happening again, Google could have the link, by default, take users to a generic download page where all versions of google chrome are available.
#Amazon instant video
In 2013, shortly after joining Amazon, I went to their seattle office and was staying in a hotel where I wanted to watch a video using my amazon staff account. Unfortunately the trackpad on my mac was broken but this was no problem for me because I am a POWER USER so I used spotlight to open chrome, tabbed to the search field, found a movie, arrived on the video page
Then this happened...
I couldn't purchase the video because the "buy" button was not focusable by keyboard. Why is that button not focusable? The page is still available on the web archive so you can see for yourself if you want to but the reason is ultimately because the button was not really a button at all:
<div class="avod-button purchase" asin="B00C1BU7V8"> <table class="avod-spritebox avod-one-click-btn" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr height="20"> <td class="content" style="vertical-align: bottom; ; background: url(/web/20130330045046im_/http://g-ecx.images-amazon.com/images/G/01/digital/video/avod-1-5/dp-sprite-total._V156422041_.png) no-repeat -4px -211px; padding: 0px 10px 0px 30px;"> 1-Click<sup>®</sup> $3.99 </td> <td width="7" style="vertical-align: bottom; ; background: url(/web/20130330045046im_/http://g-ecx.images-amazon.com/images/G/01/digital/video/avod-1-5/dp-sprite-total._V156422041_.png) no-repeat -396px -211px; line-height: 0.1px;"> <!-- --> </td> </tr> <tr height="7"> <td style="vertical-align: bottom; ; background: url(/web/20130330045046im_/http://g-ecx.images-amazon.com/images/G/01/digital/video/avod-1-5/dp-sprite-total._V156422041_.png) no-repeat -4px -231px"> </td> <td width="7" style="vertical-align: bottom; ; background: url(/web/20130330045046im_/http://g-ecx.images-amazon.com/images/G/01/digital/video/avod-1-5/dp-sprite-total._V156422041_.png) no-repeat -396px -231px; line-height: 0.1px;"> <!-- --> </td> </tr> </tbody> </table> </div>
#How can this be fixed?
This is bad because a
Why not use an element that is naturally clickable and focusable like
<a>? Whoever built this has gone out of their way to ignore web standards.
#What is the point of the amazon website?
The entire purpose of the amazon website is to sell things and make money. In this instance, I was unable to buy something. The ability to buy a video was inaccessible to me and I had a poor user experience.
I'm not suggesting amazon's developers should have specifically gone out of their way to support users with broken trackpads. I'm not imagining a user story or ticket that says "as a user with a broken trackpad I want to be able to buy a video". I'm suggesting if they built it properly they would have supported those users without any extra effort and their video page would have been more accessible to more users and devices.
These days, Amazon have fixed this problem and now use a
<form> with an
<input> and because it's a
#How can we build accessible websites?
Making an accessible website sounds like a lot of work but most of it comes for free if you follow web standards. It's not about putting extra effort into making it work individually for every possible user out there.
It's about putting most of your effort into building a robust, reliable, standards-driven foundation.
No matter how complex your website will eventually become, if it's built on a solid foundation, it is more likely to work for more of your users, regardless of their circumstances and the platform they are using.
As developers or designers or anybody involved in the making of a website, we should be able to make a business case for making our websites accessible to more users.
#The business case
I recently rebuilt the graze.com signup flow to more closely follow web standards and address some of the issues I have described earlier in this post.
- Correct use of form
labelsinstead of reliance on placeholder only
- HTML5 form validation
- Larger, more readable text
- More white space between fields
On desktop there was a small improvement in conversion but 60% of graze.com's traffic is on mobile where it showed an average 7% improvement in conversion rate.
(I realise this is quite a meaningless graph without the axes and values but I censored it at the last minute in case I accidentally revealed some sensitive business information)
I already wanted to make websites that work well for as many users as possible out of a sense of pride. For example, I sometimes have trouble sleeping if I suspect I may have used a semantically inappropriate element on a page.
The good news is that making accessible websites is compatible with global capitalism.
When you frame accessiblity issues as user experience issues, it becomes easier to make a business case for spending time on it.