1 in 5 people can't use your website

Today I’m going to be talking about why one in five people can’t use your website. As usual, as a UX designer, I’m here to talk about users, all users. But we often forget that as digital marketers we’re actually a minority. We know how the internet works. We confidently access it. Actually, in our day-to-day working lives we influence how the rest of the world interacts with the internet too, and that is quite easy to forget. Therefore, we have responsibility to make sure that all of our users can access the information, products, services, and content that we want to display as well as we can.

Why is online accessibility important?

Today my talk is going to be about accessibility. Accessibility fundamentally is about whether a product can be used by people of all abilities.

The stats around this, well, one in five people in the UK have a disability. That’s quite a high number of people. That could be visual, that could be hearing, motor, or cognitive disability. And that can really influence how someone accesses the internet.

By considering that when we’re building our websites, we make our sites accessible for that extra 20%. We’re not limiting how the other 80% access the internet. We’re enhancing, and we are getting an extra 20% of people able to access the information we present.

One of the key things that you probably think of with the disability and how that affects us is visual impairment. As of 2015, over two million people in the UK – so around one in 30 – live with sight loss. That’s, to put in into a relatable figure, that’s one child in every school class. It’s actually quite a lot of people. Around 360,000 of those people are registered as blind or partially sighted. This is only a number that’s going to go up. By 2020, it’s expected to be two and a quarter million, and by 2050 it’s expected to double to nearly four million people. This area, this little pocket of the UK that could potentially go unnoticed is just going to get bigger.

Another one that people often forget with accessing the internet is actually people who struggle with words and numbers. It’s estimated that up to every one in 10 people in the UK has some degree of dyslexia, and one in six adults have the reading age of an 11-year-old. Those people are accessing our websites. We need to make sure that they can actually understand the information as well as possible and to not alienate them from an experience that we may take for granted.

How to make your website more accessible

I’m going to start off by explaining how can we help people read and understand the content we present.

Fonts and page structure

My favourite thing, fonts. We can consider font sizes, line heights, chunking information, this really helps. If we simply take the BBC, this is an article. I’ve taken out all of the hierarchy in here. You don’t really know how to navigate the page. Where’s the heading? I mean you can assume it’s at the top, but how do you know for sure? That could just be a breadcrumb. You don’t know what it is. We don’t know where headings are within the text. We don’t know where paragraph start and stop.

Okay, let’s try and help out there by adding a bit of space. Cool, right, it now becomes a bit more manageable. I kind of get where you’re going with this. Now let’s add some hierarchy. Now I can see that drunk squirrel, he’s been up to some trouble. I can actually understand what this article is saying. I can scan the article to try and find what is relevant to me and what I actually want to know. Now, this is something that we can very easily underestimate and it’s actually really easy to enforce.

Page zoom

Something else with accessibility is, a lot of users actually zoom in, create a manual zoom. You’ve probably done this accidentally on your keyboard before, a little bit of control plus and then you’re like: “Oh my god. Why is everything massive?” This is the BBC 100%. Then we look at it 150%. Now, the BBC because it’s the BBC has actually been coded really well. If we look at it, just looking at the h1 on this page, we can see the font styling they’ve got going on, and in particular interest are these two; so font size and line height.

For those that don’t necessarily use CSS very much, ‘rems’ are relative units. They are based to the base font size of a browser. If you were to say your base font size is 20, it goes: “Okay, I’m going to time that by two to give you the size of your heading.” If a user increases the base size of their browser, everything scales up. By doing things proportionally, we can give a consistent experience rather than when you accidentally do control plus and everything gets a little bit squidged and everything just gets a bit awkward. We can actually make it so that users access this content really well and really neatly, without necessarily patronising them and reminding them: “Oh, yeah, you’ve increased the zoom, so hey, you don’t need to see half that image.” It just helps the experience.

Screen readers

So, helping the experience for people that may need it, this is a woman using a screen reader to access a website. Around 30% of people who use assistive tech to access the internet, use a screen reader. That’s quite a lot. Actually, you would think that it’s blind people and people with partial sightness, but actually stats have been shown that a lot of dyslexic people actually use screen readers, which actually makes complete sense. It’s not necessarily just blind people who use screen readers.

We have a quote here from a user who say: “There are a lot of websites I avoid simply because I don’t know if they’re going to work.” Can you imagine that? If someone knows: “You know what? Ebay, that’s rubbish, no, I’m not going on that site, I’m not buying anything from there.” Tescos? “No, don’t like their site, can’t use it, it’s not going to work for me.” How are you going to prove to that user that they should come back and buy from you? How are you going to prove to them that your content is useful for them? They’ve already dismissed you. You’ve got a chance the first time they land on your site to try and influence them to come and interact with your site.

We can do this with mark-up for proper headings, making sure we actually use buttons, input fields, labels. We often rely on the visual cues because that is what we as humans sort of look for. That is fine. But we’re forgetting the other 20% who don’t necessarily know those elements exist. Actually, these elements, we know headings really help with rankings and search engines and we know alt text also helps. Well, alt text is also really useful because it tells the screen reader what’s in an image. Otherwise, it just starts reading out january06.jpeg. That doesn’t tell me anything. You’ve got to really consider these things.

Ads

Something else that’s really interesting actually and that I personally had never considered before researching this presentation is ads. A lot of ads aren’t actually optimised for screen readers. Sometimes they don’t appear. Simply you could be paying for an impression and it’s just not read, it’s just not read out. It could be read out, but because of the structure of it, it hasn’t been coded properly, and so it just is a load of gumph and they don’t know what your message is. So, yet again, you’ve paid for an impression and they don’t know. All they heard was the click here at the end. They don’t have a clue what’s going on.

We have a responsibility to help these people access the internet. Can you imagine how alienating it would be to just be innocently browsing a website and suddenly have it shouting at you for something that might be an offer, but you’re not too sure? We need to consider these things.

How to identify improvements to accessibility

That’s all the development side of things, what can we actually do on a day-to-day to try and analyse what’s going on so that we can say: “Hey, do you know what? We need to look at this, and we need to sort out this area of our site.”

tota11y Chrome extension

Well, there’s this chrome extension, which is really good, highly recommend it called tota11y. A11y is an abbreviation used online quite often for accessibility, because there’s 11 characters in accessibility. This is a script that you can put into your bookmarks and you can use it on any site. It’s a JavaScript plugin.

Here’s a site. Then you can see the tota11y panel on the left-hand side. Now there are various elements to tota11y’s functionality. We can look at colour contrast; we can look at link text, heading levels to see how things are jumping around. Today, we’re going to be mainly looking at colour contrast.

One in 20 people are colour blind and struggle with colour. Again, they are another proportion of the internet use that we can help. At the end of the day these issues, they’re not detrimental to everyone else if you enforce them. They just help everybody. If we look the plugin in action, you can see it highlights areas of low contrast. We can see at the top the navigation isn’t necessarily strong enough. We can see, yeah, the text here is okay, but in the video it’s not right, and that link just underneath those panels isn’t right. We can start to look at this and go: “Do you know what? We can fix that.”

tota11y actually it gives you suggestions for colours that should be implemented, and then you can literally just insert into CSS, problem solved, it’s literally just a hex code, six characters and it’s fixed.

NoCoffee Chrome extension

Another one is NoCoffee. This is a Chrome extension. This helps simulate different visual impairments. If we take tumblr homepage, for example, and then we look at it through the eyes of someone that’s colour blind, you can see how it changes quite dramatically and how sometimes the links may not be apparent.

We can also look for people that have particularly blurred vision. Here you go. You can see suddenly you don’t even see these links in the bottom left hand corner. Where even is the search bar?

These are really simple elements that we can just very innocently forget about, but they’re actually really important. Actually, even as someone that accesses the internet every day, I get really frustrated sometimes being like: “I can’t actually read half of this.” It helps everyone. It’s not just the minority.

Tips for improving your site’s accessibility

Considering all uses, how do we get that extra one in five to access our sites and feel empowered?

• • Well, we can start off by ensuring we have clear page hierarchy, little bit of typography
  • We can adapt for user customisation using relative units and allowing these things that users do plug into their browsers. Let them work. Don’t tell them they’re wrong – they haven’t done anything wrong
  • Use correct mark-up everywhere. It’s not just your site; use it in ads. It will help, again, everyone – search engines, Google loves it
  • Check your colours
  • Don’t forget about alt text. Actually say what an image is doing, don’t just leave it as “jan06.jpeg”
  • Then use generous touch targets. Make sure that you can actually easily type something

Thank you very much.