Designing for Accessibility – WordCamp London

By Graham Armfield | 10th November 2017

Earlier this year, I presented at WordCamp London on ‘Designing for Accessibility’ – a presentation aimed at highlighting design decisions that can affect the accessibility of websites and apps.

Open Inclusion do a huge amount of inclusion training and awareness including technical digital accessibility training. We tend to do it role based by a role expert, eg Jon, our AUX specialist trains UX folk, Gemma a QA queen trains the QAs and myself, a developer, train the devs. However sometimes it is good to provide some cross over, training devs in basic design or providing designers some useful code or semantics techniques. As experts it is also useful to take the other perspective from time to time to ensure we keep aware of the whole chain required to create an accessible customer experience.

It was in this way that I, a developer by trade but also an experienced accessibility consultant presented to WordCamp London on some basic design elements that set the scene in a way that the developers can ensure with their support the product is accessible to the widest possible user base.

WordCamp London

WordCamp London 2017 was held at London Metropolitan University over two days, three including a contributor day – 17th to 19th March.

Background to my presentation

Normally I present on various accessibility issues for developers – both demoing assistive technologies, and focusing on technical accessibility aspects within the HTML markup in pages.

This presentation came about as a result of my experiences training developers. Sometimes, if I was outlining techniques or functionality, the developers would say “We can’t do it like that because the designer has specified this” – occasionally referring to brand guidelines which also may specify components that would be difficult or impossible to create in an accessible way.

It underlined that graphic designers and functional designers have a significant part to play in the accessibility of a website or app, before the developers even get to build anything.

So this presentation focuses on a few design elements that it’s important to get right. It’s not the whole story, but in the limited time available it offers guidance on some key points.

Subjects covered:

  • Colour contrast – enough, but not too much
  • Using colour as the only way to convey meaning
  • Catering for keyboard only users
  • Styling content text
  • Placeholders in forms

The video

All the sessions at WordCamp London were videoed and have subsequently been published on wordpress.tv. The video of my presentation is embedded here. Note that captions are available if required.

WENDIE: Graham Armfield is also about user experience, he has been a user expert for over 15 years, and he is trying to get it in the head of everybody that works with websites so that is all of us, please put your hands together for Graham.

[APPLAUSE]

GRAHAM ARMFIELD: Accessibility presentations are like buses: you wait a while and then three come along at once. So, thank you all of you who are in here for choosing my presentation.

My name is Graham Armfield. I am a Web Accessibility Consultant. I have been doing this for a long time now. My day job these days is helping developers (mainly) improve the accessibility of their own websites or the websites of the companies they work for.

Most of my presentations, including ones I have given to WordCamps before, are about developer related subjects. However, as most of you may know, the accessibility of websites is primarily down to the mark up: HTML, native app languages etc. But often I come across when I am teaching developers how to do this or training them with courses I have done, they will come back to me and say “Yes, but the designer told me to do this.” “This is what the specification I have got is.” “I can’t do anything else because I have to follow this specification.”

And so what I have put together is this presentation because it has become very obvious to me, is that design decisions can also influence the accessibility of a website as well – before it even gets to the developers to actually do something with it.

Now I can’t cover everything in this time but what I am going to look at is quite a lot around the use of colour in a variety of guises. I am going to look at how designers need to cater for keyboard users – that is people who aren’t using a mouse but rely on keyboard interaction and other tools that people might use that hook into the keyboard functionality of the websites. I will talk about texts styling of text and content. Then a little bit at the end on forms. There will be time at the end for questions. So we will cover off stuff then if there is anything you are not sure about.

My first section then is on colour. The first thing I want to talk about is colour contrast. This seems to happen at a lot of organisations, they have a brand palette and it specifies all the nice pretty colours that designers are allowed to use in their sites. What often happens is in the brand guideline there will be combinations of colours that are no good from a colour contrast perspective.

Now this is actually a website that I built some years ago. I was asked to build this website because it was a referral from a previous piece of work I had. They came to me because I knew how to build an accessible WordPress website. Then they said, by the way here is the design, the designer has come up with this. I was given the design and I thought “uh-oh here are some problems” because on the website, in the initial version anyway, pretty much none of the text had the necessary colour contrast.

Here I am using a colour contrast analyser tool. It is available from the website shown. This is a useful tool available on Windows and Mac machines. This is a slightly older version of it. It has a colour picker so you can run it across the website and do a foreground-background check.

Now it is fairly obvious that the mustard coloured text here has not got a lot of colour contrast. The tool tells you immediately whether it passes or fails the necessary WCAG2 guideline. (WCAG2: Web Content Accessibility Guidelines these are the internationally recognised set of benchmarks for accessible websites.) There is an algorithm specified in there, which this tool refers to.

So this text fails across the piece. Also, the grey text fails across the piece.

I was in a bit of a quandary when I was given this design, because I build accessible websites. So I went back to them and said, “it is a lovely design, very attractive design, but you have got a problem here.” At the end of the day, they said, we like this design so we would like you to do it anyway. They agreed to tweak a few things, then I had a bit of a quandary that I had to deal with: do I do the work or say no? In the end I did do the work and they said they were prepared to take the risks. So if anyone went to them to complain about it, at least they knew the situation with the colour contrast deficiencies. The irony is that now the site is maintained by someone with poor eyesight. How they cope with that I don’t know. Luckily the WordPress admin has a better colour contrast than the front end.

Colour contrast between elements. There I was talking between backgrounds and foregrounds. Here is a slightly different issue. I have got a form and the form elements themselves… it’s showing you here that the text is dark, very dark in there, and also the background that the form sits in is light grey on the top.

So there is no problem with colour contrast here with foreground and a background. You can see immediately what is going on here is that the designer has specified that the border of the input fields should be removed so actually someone with poor vision is going to struggle to fill in this form with a mouse because it is difficult to see where the field boundaries are. You need to be aware of that.

With all the stuff I am talking about, I don’t want to tell designers how to do their job, I want to underline that design decisions can make it difficult for some people. And, it is not just a small group of people. A lot of people have, you know, invisible impairments. If you see someone walking down the street with a white stick or a guide dog, you can be fairly sure they are blind or nearly blind. But a lot of impairments are actually not half as visible as that – low vision affects around 2 million people in this country. So that is not a small proportion.

So, good colour contrast is important. But, it is possible to have too much… I am going to illustrate that with a true story.

This is my friend Tracey, she is a singer, and here is her handsome guitarist. We perform together at open mic nights in Surrey where we live. Now, we mainly do covers but I am a songwriter myself and she wanted to do some of my songs. She said, “can you print out the lyrics for these songs” and I did. I gave them to her on a piece of white paper with black text: printed out as ‘normal’.

She said, “oh I can’t read this you pillock, I am dyslexic!”

She is quite severely dyslexic. I had to do it again and print it on her paper. This is what I gave her, so the original view, but what she needs, she needed me to print it out on Green Paper. If it wasn’t on green paper, she couldn’t read it.

I won’t say to everyone they need to go out there and make the backgrounds of their websites green because some dyslexics prefer blue or purple backgrounds as well. So the point is, is that black on white or white on black is actually  straying into the territory of too much colour contrast.

There are browser tools that people can use to change background colours in certain browsers, including the dreaded IE but it is something to bear in mind, because dyslexia affects about 10% of the population. You don’t know though because society stigmatises dyslexics still. My eldest daughter is dyslexic as well as my friend Tracey. A lot of people treat them as being stupid because people perceive their difficulty of reading, with Tracey she also has memory problems as well which means that whenever we are playing, she has to have the lyrics in front of her on the music stand.

I forget the name of the guy who was in the Beautiful South? Someone may remind me – yes, Paul Heaton. He has a music stand I think it is for the same reason basically.

Okay. So moving away from dyslexia, probably everyone knows what this is all about. Colour blindness.

Colour blindness affects very few women, only 1 in 200 women, but 8% of the male population. It is a genetic condition. That equates to over 2 and a half million people in the UK. And there is probably, I don’t know if anyone wants to volunteer, but probably someone in this room who is colour blind, anyone want to put their hands up?

Thank you, very brave. You as well sir? Excellent.

Well, there are lots of people with dyslexia and colour blindness amongst us. So key things to bear in mind is using colour to convey meaning, is quite important.

This is based on when I used to work in a large financial organisation doing this accessibility stuff, these were reports that we used to produce. They are called RAG status reports, red amber green. If you produced this as a web table, and things with a green background, if you are colour blind that might be a series of grey scale tones right and so it is hard to tell the difference. So you shouldn’t ever use colour alone as a way of conveying meaning. It is okay to use colour because a lot of people will get that straight away, but make sure it is not the only way to do it.

The irony here is that red/green colour blindness is the most common type of colour blindness.

So here is a more leisure orientated thing. It is based on the coverage of something, the world cup I think it was, from the BBC.

I met a woman at an accessibility conference I went to some time ago who ran a society for parents of colour blind children. She said her son got, who was very interested in football, got really frustrated whenever they showed these things on the penalty shoot outs because he could not tell the difference between the green and red blobs they put out.

You know, that is fine, it is quite quick to see that if you are not colour blind, but what about doing something like this as a simple addition to that, so it is still attractive, obviously I put it together, so it is not beautifully designed, but you get the impression of what I am talking about there. You have got the colour which is a quick thing but also the symbols as well.

Okay, another way that colour is used on websites is to indicate links. Now this is a common construct I found in WordPress themes. It is having the links as just coloured text. Now there was a convention when the web was old, about 15 years ago, 20 years ago, a long time ago in the web; that people put underlines under their links, right?

Now if I flick backwards and forwards between those two views, see how much easier it is where the links are, when the underlines are present? So think twice perhaps before you remove that especially if your green is quite close in the colour styling to the black text.

This is a nice good presentation screen here. Sometimes when I have given presentations like this to developers I am using a rather rubbish projector and something like that and it is almost impossible to see the difference between the green and that text there. The next section is about the use of keyboard, some people rely on keyboard interaction, because either they can’t use a mouse or choose not to use a mouse.

So, this is a website for a function I went to last September. Not sure if Dave is in the room? He is? Ha ha. Okay. So here we go, this is the menu for the website for Front End North. I hover over this, the links change colour from yellow to blue. But what happens if I tab to the links is that as well as the colour change, I got a nice border around it as well. So that is really good.

Now if I am using my mouse pointer to move around a screen I am completely in control of this because I know where I am going to go with it next. If I am however relying on the tab key to take me from link to link to link, to button, to form field etc., etc. I don’t know where that is going to go next. Hopefully no one has messed around with the tab order of the page and so it is quite sensible. But the tab focus can jump around the page quite considerably. For that reason keyboard focus should be as obvious as the hover state.

Presumably when web designers specify a design for developers to use, they will specify what the hover states look like, then they need to be specifying what the keyboard interaction looks like too.

Sometimes the browsers, by default, put a focus indication around elements that can get focus, that’s links, buttons, form fields by default.

Sometimes the default browser focus indication is just not enough. In Chrome it is a blue ring which is nice and visible, but in Firefox (I am running a Windows machine here so I also use Firefox and Internet Explorer) it is a thin dotted white line. In some situations that works nicely.

But here, is a screen shot from a website from a company that I have been working with, and this is actually a carousel and there is a button that controls moving the carousel left and right. This is what it looks like with no focus and this is what it looks like when it has got focus. So it is quite subtle right, unless you are right down the front you might not tell the difference.

However if I magnify this area, you will see, see the fuzzy edge? That is because it actually has the default browser focus indication. That plainly is not enough here. So, you need to be thinking about things like this and actually specifying how easy it would be if that button turned blue when it got focus. That would be a much more obvious change in focus.

Okay. And this is what some websites do: is they take the outline off altogether. Someone has spotted that Chrome puts this nice blue line around links. They think: ‘I don’t want anything like that on my website. Let’s get rid of that.’ That of course makes it very difficult.

Here is a website, I will actually demo this in a second. It is impossible on this website to see where your keyboard focus is at all. There is no way to see it. As I will demo now. I will quickly flip out of the presentation and go to a browser.

I have used Firefox here. Okay, this is a good example, this is gov.uk. If I hover over these links with a mouse you will see that there is a subtle change in colour and these ones over here. Watch around if I tab around. I will start at the top. So I am pressing Tab key, tab key, tab key, tab key, tab key, etc., etc. You will notice that focus is a lot more visible. This is really good.

As I mentioned before, if I am in control of my mouse I know where I am. It is now obvious where it is.

An even better way of doing it is the M&S Bank website, which used to be rubbish from accessibility perspective but I have noticed recently it has changed completely. What this one does is even more interesting because…

I have only ever seen this on one other site. That was a website of some accessibility specialists.

Now if I start at the top. There is a skip link there which takes me down to the page which is fine. But now I get this blue ring, but notice how it actually guides me to where the next link goes.
Interestingly, it now goes to the M&S Bank logo. Watch how it moves; it guides peoples’ eyes to where focus goes next.

This is a real dream way of doing it because for someone who relies on keyboard interaction with the site, with this site, who can see, this is a god send, because they know exactly where everything is.

I mentioned the men’s health magazine website. I will just make sure that focus is at the top.

(How am I doing for time by the way? Fine thank you.)

Okay, so now I am doing tab, tab, tab, tab, tab, tab, tab, tab, you can see that things are happening because this little location bar down here is changing. But I am not getting any information at all about where focus is on that page. That is true across the entire site. So a sighted keyboard user would have terrible trouble using that website.

Right let’s dip back in…

The next section I’m going to talk about is text and content, and the first thing I’m going to talk about is text resizing and zooming.

This is from the TSB website it’s an older iteration of it, not long after the divorce from Lloyds Bank a couple of years ago. So this is what these panels look like. It’s a list of links at the normal text size and this is what it looks like when the user makes the text bigger.

The thing to bear in mind here is text resizing and zooming are not the same thing.

Now as you’ll see there is an exception to what I’m about to say is that often what happens if people do text zooming is that everything on the page gets bigger and that’s the idea. Now most browsers do this by default but what happens quickly is you start to get horizontal scroll bars. On a wide laptop screen that’s not quite true, but if I’m running an older machine or a smaller laptop I will start to get horizontal scroll bars, and you know that horizontal scroll bars are not a good thing for people. And that is why people opt, in some browsers, to use text resizing.

It’s readily available in Internet Explorer and Firefox where you make just the text bigger, and that can bring challenges like this.

But it’s quite possible when doing your designs to think about what’s supposed to happen and this is a great site for an example of how to do it properly – the Lego shop which is a fantastic site to look round. This is what it looks like at the normal size and this is what it looks like when I’ve made it bigger and what happens, you’ve probably guessed here, is that, and this is both in
zooming and text resizing, there is no horizontal scroll bars but it progressively goes into the mobile view of this site and it’s great. In fact in this site, I’ll show in a moment, text resizing and zooming gives you ultimately the same view right up to quite large amount of magnification so that’s good.

So the sites you are designing, does that happen for them, is that going to work for them? You have to think about where the content is going to go.

So, let’s have a brief look at that. Here we go, Firefox. So this is the page about the Tie fighter in the Lego site.

In Firefox the options are controlled in view. Zoom, zoom text only, if that’s checked and then when I’ve checked that I use control and plus, I’m not sure what the Mac options are here in safari,
but certainly control plus, it makes the text bigger but not the container. But in the Lego site it actually works quite nicely. Now if I press that 6 times, that is about the equivalent of 200% of the normal size which is what the accessibility guidelines (WCAG2 guidelines) specify that you need to do.

So that is good and you can keep going and, yes, obviously there is you can’t see much on the screen at once but if I’ve got poor eyesight, everything is pretty much there. It’s just there is a bit of truncation going on over here. But that is not bad at all and it looks almost the same if I actually did zooming instead.

But now let’s have a look at Evans Cycles. So I have got… (just double checking that I’ve got the same setting on this browser). Yes zoom text only. Now I’m going to press Control and the Plus button 6 times: 1,2,3,4,5,6. Okay so here you can see in Firefox it’s actually helpfully telling me what the resize is.

You will notice at the top it’s generally not too bad. You’ve got some spillage of text over something else and that but generally it’s fairly usable at the top of the page even where you’ve got this doormat navigation. That’s pretty good. But it starts to get a bit messy down in the product areas where there is some truncation and what have you.

Now to see what a real disaster looks like, we all like to look at a disaster don’t we?

OK the Dyson website, quiet a stylish website if you want to buy your vacuum, or hoover as I call them, I am old-fashioned. Normal size. Press Control Plus. 1, 2, 3, 4, 5, 6. Oh dear oh dear. I’ve got this white Panel which is now obscuring a lot of the page. And we’ve got all kinds of mess basically.

If I rely on making the text this big to use this website, I am going to really struggle here because in some places I’ve actually got 3 layers of text superimposed here. And so that’s not good.

So we’ve seen from the Lego site it’s perfectly possible to get this right. So just bear that in mind please when you are specifying your designs for what’s supposed to happen.

Next, text justification. Here’s a paragraph of random Latin when it’s left aligned and this is what it looks like when it is fully justified. OK. It looks neater on some levels but you can see if I
flick forwards and backwards you can see what’s happened here is that it’s actually stretched the gaps between the words and the tricky bit here is this is a cognitive difficulty for a lot of people
but especially for dyslexics because on each line the amount of gap between the words is now different to how it was before, and what can sometimes happen, not for all dyslexics but for some people, is they get this effect of rivers of white space, where words stretch apart there are channels. And dyslexics focus on the channels between the words rather than the words itself, and it makes the paragraphs really difficult to read.

OK, one small bit on forms.

This is one of my bug bears that I come across quite a lot when I’m doing testing and looking at people’s websites before I train their developers. Use of place holders.

Here is an example from the Consumers Association. You’d think they should know better really. So, placeholders here. They didn’t use a placeholder for that even though they could have put
which train company used most often in the option in this select but there you go. Now this is a real problem for some people and it actually specifies, if you look at the HTML 5 specification, it says here, in plain English: the placeholder attribute should not be used as a replacement for a label. And then in the green paragraph afterwards it tells you some of the reasons why it’s a bad move to do this.

The problem is as soon as you start typing into a field that’s got a placeholder, the placeholder disappears so if you’ve got people who have memory problems, they can quite easily
forget what the field is supposed to be for. And you might, in this room, perhaps we’re all sort of like very able people, I don’t know – but for some people that becomes a real problem. They then have to delete the text and get a reminder of what’s there before.

The other reason another problem there of course – if I submit a form and then it comes back because I’ve got some submission errors, because it doesn’t validate properly, there is then no prompt
for each of the input fields because typically when you play a form back to a user, it will actually then have what the user just put into that form. And so you can run into problems there because people don’t know what it is that they need to correct.

Obviously if your error messages are quite good that might not be so much of an issue.

The other thing with placeholders is by default the text is very faint so people who have poor vision often can’t read what the placeholder says. So a solution there might be to make the place holder darker but then you run into the thing that people can then assume the field is already completed. User studies have found that a lot of people will ignore form fields that have got placeholders in because they think there is a default value, not everyone goes line by line reading a form when it gets given to them.

Okay that is the end of my presentation. Thank you very much for the time. I’ve come in 2 minutes early.

[APPLAUSE]

Are you interested in training?

Please contact us if you are interested in specific role based training to build the accessibility skills of your team. We can tailor this to your business, projects and products and deliver it either via WebEx or face-to-face.