The talk was given at The Amsterdam University of Applied Sciences as part of World Usability Day 2017: Inclusion through User Experience.
Before I start I just want to frame the talk a little by touching on the three words you see on screen, Diversity, Inclusion and Accessibility.
In broad terms, diversity is any dimension that can be used to differentiate groups and people from one another. It means respect for and appreciation of differences in ethnicity, gender, age, national origin, disability, sexual orientation, education, and religion.
Inclusion is a state of being valued, respected and supported. It’s about focusing on the needs of every individual and ensuring the right conditions are in place for each person to achieve their full potential.
As Jutta Treviranus from the Inclusive Design Research Centre says, “Diversity is our world’s greatest asset and inclusion is our biggest challenge”.
Finally, Accessibility is about ensuring that the things we design, whether they are products, services, devices or environments are accessible by people regardless of disability.
As Microsoft say in their Inclusive Toolkit, "Accessibility is an attribute, while inclusive design is a method. And while practising inclusive design should make your products more accessible, it's not a process for meeting all accessibility standards. Ideally, accessibility and inclusive design work together to make experiences that are not only compliant with standards but truly usable and open to all.
In short diversity is the mix, inclusion is getting the mix to work well together, and accessibility is an ingredient to that mix.
With all that in mind, I’d like to talk to you all about Accessibility for UX Designers, and detail what we can do as user experience professionals to ensure that we are building products and services that will work for people regardless of ability or disability.
Hi! So my name is Dean Birkett, and I’m a freelance user experience designer here in Amsterdam. I’ve been coming at problems through an accessible lens for a number of years now, and for the past two years, I’ve worked directly on building products for people with a very specific need, helping non-verbal adults and children with various diagnoses and acquired conditions to communicate.
I’ve needed to use aids to improve my vision since around 6 years old. In the UK in the late 70s and early 80s, you would see these types of glasses everywhere. The National Health Service tortoiseshell spectacles. They were so prevalent they were almost like a uniform for people with low vision. But as unappealing as they may have been at the time they were still useful and usable.
Today there are so many types of frames you can choose from, these add an extra dimension, they allow people to show their personality, you can find frames just to fit you. They are not only useful and usable but aesthetically pleasing and customisable.
What was at first purely an aid to help people with low vision see better has now become a fashion accessory. These glasses here serve absolutely no purpose other than as a visual statement about the person wearing these frames. They are pure aesthetics.
This is a form and function slide, with two overlapping circles, and the sweet spot is right there in the middle.
Like glasses, the web had humble beginnings. This is the first ever website… what is remarkable about this is if you visited on a smaller screen the text would reflow, if you wanted to increase the font size you could, if you used only a keyboard to move around the screen you could tab from link to link, and if you visited this using software to read the text aloud to you then it would work exactly as expected. This site is useful and usable.
Contrast that to the type of site that is championed by designers.
The site may look visually appealing, but it is pure eye candy. Unless you use a mouse this site is not operable, you can’t turn off the sound, you can’t scroll, you can’t perform any actions.
We are failing people if we see tweets like this, which says, “I really want to use your service, but sadly your site is still completely inaccessible”.
As Tim Berners-Lee said, The power in the web is in its universality. Access by everyone regardless of disability is an essential aspect. This is oft quoted and appears in at least 90% of accessibility talks, so let’s get it out of the way early.
Without trying to be controversial, the web to me looks a lot like this. We as designers are constantly pumping out poor experiences for many people.
As Greg Tarnoff states, “Experiments are great because it allows us to understand the limits of what we can do. But now that we can create an atomic bomb, should we create an atomic bomb?”… now I know that we’re not creating atomic bombs but hopefully, the sentiment comes through.
After all the World Bank estimates that there are 1 billion people with disabilities on this planet. 1 billion. That’s 15% of the world's population – which is a huge amount of people that you could be potentially locked out of your site or product. 1 billion is not an edge case.
You can be born with a disability or acquire one through illness, accident, or events such as war, or a natural disaster. The image on the screen is from the Haiti earthquake where it was estimated that 300,000 people became disabled overnight. There is no escaping that people with disabilities are part of our human diversity.
More commonly the likelihood of being affected by disability can simply come from getting older. We are now living longer which is great, but as we age the likelier it gets that we will face one form of disability or other.
In 2009, 23% of people who live in Japan were 65 and over. By 2030, one in three people will be over 65, and one in five people over 75. This is not just in Japan…
And as Microsoft points out in their excellent toolkit, disability isn’t just black and white, we can break an arm and not have the same ability to do things as we could without a broken arm. Impairments can be permanent, temporary, or situational.
Hugh Herr, a biophysicist at MIT states “Humans are not disabled, a person can never be broken. Our build environments, our technologies are broken and disabled”.
And as designers this is something that we can work with, we can fix environments, we can fix technologies, and we can fix our digital products.
So today I’d like to go over a few topics. I’m going to go into some types of disability that I’ll be talking about, give a brief intro to some types of Assistive Tech out there, and the bulk of the talk will be about some considerations that we as designers can make for accessibility. I’ll finally end with inclusive personas and how we can go about using them to help us create a more accessible product.
So let’s get started…
The four main types of impairments that people think about when talking about the web are, visual impairments, such as colour blindness, low vision, blindness. Motor impairments, such as difficulty or inability to use the hands, tremors, limited fine motor control, slow response time. Hearing impairments, deafness, hard-of-hearing. And cognitive impairments, which could affect memory, attention, developmental issues.
But there are others to consider, such as vestibular disorders, where the user may feel nauseous because of animation or effects on screen, and speech impairments such as someone with a stutter or someone unable to speak at all.
The Web content accessibility guidelines, also known as WCAG are guidelines published by the Web Accessibility Initiative, as part of the World wide web consortium. They are really dry, but these guidelines help us to ensure that what we create is accessible for people with disabilities.
WCAG has four principles of accessibility, known as the POUR principles. They are Perceivable, information and UI components must be perceivable regardless of the output device. Operable, UI components and navigation must be operable regardless of input device. Understandable, information and operation of the UI must be clear and easy to understand. And Robust, content can be interpreted reliably regardless of the technology in use.
So what is Assistive Technology, or AT as it is also known.
Most of us will be very familiar with the keyboard and the mouse, it’s likely that as designers will use these in our day to day… but it’s possibly because of these that we’ve been held back with regards to creating accessible products.
It wasn’t until the iPhone arrived that many of us would consider other forms of input. Instead of using a fold out keyboard like other phones had done before it introduced us to the world of touch.
But there are a wealth of other input and output devices out there… this is a very small selection, a curved keyboard, a mouth wand, a sip and puff device, some switches, a one-handed keyboard, and a braille keyboard.
This is a short clip of someone using a braille keyboard for six-dot input.
As you may gather there are lots of ways that people will interact with your product.
I’ll be talking quite a bit about screen readers, and there will be a number of examples. Screen readers allow people to hear what is on screen. And using keyboard shortcuts they can navigate to the area of interest. The most commonly used screenreader is still JAWS, although NVDA is also a widely used alternative on the Windows platform. For Mac and iOS user's we have Voiceover already packaged with the operating systems, and Android users have Talkback.
Okay, so that’s the dry part of the talk out of the way. We’ve covered some of the types of disabilities and impairments we should be considering in our designs, and we’ve skimmed over some of the types of devices that people use when browsing the web. This next part is the bulk of the presentation today, where I’m going to show some of the challenges that we face as designers, and what possible impact these decisions may have with regards to Accessibility. I will be giving examples of how other sites do things, good and bad. But if I show your workplace then please take the feedback from a good place.
I’ve split this area into various sections, but I should say that there may be overlap. So something which is an issue for someone with a vision impairment could also create problems for people with motor impairments.
When we talk about the web and accessibility with designers, the first port of call is usually this… Colour.
1 in 100 males will have a form of colour blindness called protanopia, and another 1 in 100 males will have another form called deuteranopia. Deuteranomaly as shown second affects 6 percent of males, making their greens much weaker.
We use colour in lots of ways. On the Adidas site you would first select the design of the shoe, and then on the right-hand side, you would see the available colours. Imagine you had a type of colour blindness, that would make selection much more of a challenge.
Contrast that to how Nike tackle this problem on their website. Although quite subtle above the selected shoe the colour of the particular shoe is written in text, in this case, Metallic Gold, Black, White and Varsity Red. You could take this further and give more context, but it is an improvement.
Unfortunately, the way they handle colour differs throughout the site, you’ll see in the left column they use circles with a colour inside to help filter out the content. Keep your eye on this block of content…
It may have been tricky to see on this screen, but the colours changed significantly. This is how the colour selection filter would look for people with deutronopia, this is what 1 in 100 men will see when browsing the Nike store online. So don’t use colour alone to convey meaning, it needs supporting text.
Color Oracle is one tool that allows you to apply a colour filter over what you’re designing to check how it may look to people with different types of colour blindness.
For Mac users who use Sketch, Stark also received a lot of praise in the design blogs - it allows you to preview your designs in Sketch and simulate various forms of colour-blindness.
There really aren’t any excuses for grey on white, or dark grey on light grey, even more so with the thin fonts as seen in use on Squarespace.
And although popularised by Apple, it seems that they are moving away from thin grey fonts inside of seethrough ghost buttons, in favour of a solid background and clear darker fonts.
Colorable is a website which allows you to enter HEX values and make changes to check if it passes the Web Contact Accessibility Guidelines or not. In the clip, I’m going to move one of the sliders and you’ll see the text get lighter until it eventually fails the guidelines.
There are many many more tools and sites out there that do this. So there is no excuse to fail colour contrast.
Aside from contrast, after we hit the age of 40 our eyesight will start to deteriorate. And we’ll find that small print either on paper or on the web is harder to read. Smashing Mag’s smallest font size on their website is 16px, which makes it a comfortable reading experience for the majority.
New York Magazine, in contrast, uses smaller font sizes and weights, and it could make it a more difficult reading experience for those with low vision.
This is the same site but with the font size at 150%. It makes it much more pleasant and easier on the eye. We should make the sites or apps we build readable for the majority by default, and allow the user to increase the font-size or pinch to zoom if needed. Also please make sure your site is responsive, the text size would increase but the content would still fit inside of your devices horizontal width.
I should say that increasing the font size in your browser is not the same as using a screen magnifier. When using screen magnification you would need to scroll horizontally for sure.
So imagine joining Twitter using screen magnification. The error message would be lost off screen, meaning the visitor would have no context of why they were unable to sign up. There are many other issues with this form, labels should be outside of the fields to help screen reader users, and to aid memory and assist people who may have become distracted. Labels are better aligned at the top of the field, and error messages inline and below, to help with readability. And finally seriously question the need for placeholder text, it has legibility issues, and if it is readable it may be perceived as have been already filled in.
I could talk lots about forms, but to save you from listening to that here are two books I can recommend. Web form design by Luke Wroblewski, and Jess Enders book on Sitepoint.
From forms to carousels, “Carousels pose accessibility issues for keyboard and screen reader users that simply cannot be adequately addressed by markup or hacks."
I’d like to give you an example of this on Amazon’s website. In this example, I am using Voiceover on the Mac, and I am using the keyboard to navigate through the elements on the page. Let’s find out what happens when I get to the carousel…
I was using the keyboard to move through the slides, but I had no feedback to tell me what was on those slides. Carousels have many other problems with them, such as autoplay, if you really really need to use a carousel then ensure that the user is in control of pausing and moving between slides… then look at your analytics to see how many people move between your slides and see if you can win the argument to remove the carousel altogether.
Alternative text allows people who use a screen reader to understand what an image is on the page. It also benefits people with slow internet connections who do not automatically load images on page load. Medium is a beautiful looking site, but let’s find out how a screen reader user would experience this site.
It’s been almost three years since James Castle asked if he could add ALT text to his images, and Medium have still done nothing about it.
You may not be the one tasked with adding ALT text to the images, but you can educate your content creators and help improve the experience of people using screen readers by removing useless words and describe the most important thing at the start. So in this instance, “Braille watch by DOT” is much more beneficial to a screen reader user that “A photograph of the DOT braille watch”. It’s also worth noting that people who may use braille readers may need to refresh their display after 40 characters, so it’s also beneficial for people using that technology.
I’m just going to play you another example of a screen reader, this time reading the links on the Paypal page…
I think it’s clear what the problem here, the screen reader is just reading out the text “Read more” without giving any context as to what you are reading more about. It would be better to explain where the link will take you, such as For individuals, For businesses, and so on.
If you do want to visually show Read More but give more context to screen reader users, then speak to your developer and ask her to check out Simply Accessible, who tackle this problem beautifully.
Also, note the box around the text, this is called a focus state and is really important for keyboard-only users to help them know where they are, so don’t disable this!
Maps are complex, and describing a map to someone who is blind for example may be very tricky. On the World Usability Day website, they needed to show the locations of the talks, which is actually quite easy to solve. I’ll just show how they did it.
I didn’t turn the screen reader on for this example because there were many issues with the form, but…
A number of years ago, I was asked to provide a way for people to find the head office of cultural heritage institutes in Europe. I’m going to play you some audio first to see if you can hear what is going on, to allow this presentation to be as inclusive as possible I have hardcoded subtitles, for those who do not need them please look away. In the audio, I’ll be trying to find the head office in France.
Visually the solution was very similar to the World Usability Day solution.
Maps do get tricky if you need to present information on borders or moving boundaries. But, when you need to show a map, ask why it is there, what problem is it solving – In the two examples, neither removed the map entirely and replaced it with drop down boxes, but both presented an alternative way to get to the information.
I’m just going to show you a clip of myself trying to book an appointment at my local barbers, just by using the keyboard as my input device. I’ll tab through the elements, and finally go to the booking page – see what happens here.
The radio buttons were not selectable for me, so I could not make a booking on the website.
Barber is a small local place of course, but what about the bigger companies… take a look at the focus state, as I try to move from the destination field to the check-in.
I was unable to get to the check-in field, which is hugely important when you need to book a hotel room.
Bart who is visually impaired he was not able to use this site. It took around 3 months but thankfully it is now fixed. How could we have prevented this from happening on our sites?
Unplug your mouse, go through your site purely using a keyboard and seeing if you are able to operate the site as expected.
Many travel sites and ticket sites also use timers, where you have limited time to complete an order. If you do need to use timers on your website then please ensure that it allows for a good period of time, and allow the user to manually extend it is possible. People with motor, cognitive, or vision impairments need more time to complete tasks. It could take someone with Cerebral Palsy a few seconds to tap a single key for example.
Although the vast majority of content on the web is text, we need to also consider how accessible or inaccessible media like audio or video is, and how that may impact people with hearing impairments. Adding captions has a wealth of advantages, and it is easy to do using free sites such as Amara.
Youtube can automatically add captions, but from my experience, it is quite poor at present. You can add your own manually though if you edit the video.
Captions are useful for all it seems. A recent report stated that 85% of Facebook video is watched without sound.
Which means that people can enjoy content in the office, or in the quiet carriage of a train. Alongside captions, having a transcript allows people to speed read through it to see if it is worth watching, and also adds an SEO benefit to your websites. Both captions and transcripts are really easy to do, but depending on the length of the video they may take some time to do, so they are sadly often overlooked.
Cognitive impairments are hugely varied and complicated to design for… but as the World Wide Web Consortium says, “Make the text easier to read”.
“The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0”… or as the W3C should have written, “Write simple clear and concise text”.
Flesch-Kincaid is a readability test. The score on the test will tell you roughly what level of education someone will need to be able to read a piece of text easily. Although the level you should aim for depends a lot on the industry and user base, it’s good to make your content as easy to read as possible.
You can test the readability of your site by using services such as readable.io – here you see that this paragraph in the web content accessibility guidelines for readability is perhaps not that readable. Again we may not be the ones writing the content, but we should be advocating for easier to read text.
As Accessibility specialist and content writer Ashley Bischoff says, “No one has ever complained that something was too easy to read”.
CAPTCHA don’t use it. Okay, next slide.
Seriously though, CAPTCHA is horrible and confusing for so many people, it may cause more issues for people who are dyslexic – if you replace it with a numeric one then it may cause more issues for people with dyscalculia.
If you do need CAPTCHA then look at Google’s RECAPTCHA, which according to a study by Simply Accessible is performing much better then the default CAPTCHAs out there.
Icons. As Adrian Roselli says, “I only just discovered that the envelope icon at the top of a message in the Gmail app means mark as unread. Label your intuitive icons”.
I’ve nothing really to add here, there are some universal icons out there of course, but depending on your audience even some of those may be worth testing. There are some interesting studies out there about hamburger icons for instance. So use labels.
Before showing the next examples I will say that it is estimated that 35% of people over 40 have experienced a vestibular disorder at one point in their life, it is similar to feeling seasick through motion. I’m going to play a few slides that may cause this sensation, so feel free to look away.
The first example is The Boat, a beautifully compelling story that although visually appealing, didn’t consider people with vestibular disorders. I will play this now.
[There is sound of rain, thunder, and the ocean]
This next example is the portfolio site of Nick Jones. This site was talked about as being a great example of a portfolio in many designer places online. This one is particularly jarring, so again please feel free to look away. I’m going to play this clip now.
Nick was great at taking on critique and feedback, as he mentions in this tweet here, “I’ve gotten some comments about accessibility, so I’ve added a ‘more accessible button’. It’s better, but still working on it”
This is what Nick did.
If you are going to use these types of effects or parallax scrolling, then pre-warn the user beforehand, and offer a way to turn it off, or allow the user to reduce motion.
This next clip has an image that rapidly changes from one to another in a constant loop. I will play the loop just once, because of the speed there is some flashing so please be aware of that.
For people with vestibular disorders this could be problematic, likewise, if these were fast moving flashing colours they could be problematic for someone with epilepsy.
For everybody though trying to focus on the text here is really difficult, and you could question the value of the animation in the first place.
If animation is needed to convey a meaning as shown here on this Medium article, consider whether it needs to play immediately, or if the animation can play when the visitor interacts with it.
As of 2018, Chrome will stop playing any clips which contain sound until a person interacts with the content, but it sadly won’t stop gifs reducing our concentration levels.
You may have already seen this clip before, but I think this highlights one of the challenges we will face with voice UI.
How do you deal with accents? What about people who stammer?
<name removed> is a teen with Cerebral Palsy, and I did some usability testing with him a year and a half ago. <name removed> uses his tongue to navigate his iPad.
I’d just like to show a short clip* of <name removed> setting up Keeble, and on-screen keyboard app that I worked on.
You’ll have heard that although understandable, it was a little tough to make out certain words. The human ear can be forgiving, but we need to make sure our products can be.
* clip removed
<name removed> can talk, but what about those who can’t? I’d just like to show you a product that I worked on, Proloquo4Text, which is an app that provides a voice for literate non-verbal people.
In the latest version of iOS, you can now ‘type to Siri’ which allows a different way to interact with Siri. So if you have difficulties with speech then you can still use the service.
Amazon also introduced the Echo Show, which reintroduces a screen and could give access to people with hearing impairments. If you are working with voice UI then you should consider how to avoid locking people out of your product.
I’d like to wrap up with an example of how to use personas to help you with some of the things I’ve spoken about today, and a little bit on how I put this all together.
A Web for Everyone is a wonderful book out on Rosenfeld, and I encourage anybody interested in Accessibility to give this a read.
It introduces us to inclusive personas and details how we could keep these users in mind when building our products.
There are 7 or 8 in there that cover a wide variety of needs.
Europeana 1914-1918 was a website that I worked on 4 or 5 years ago, the website is a collection of stories and digitised objects about the First World War, such as this one here where two amputees are playing cards with their prosthetic arms.
The stories and items were collected at collection days, where people would come to tell their family stories and to bring items to be digitised. One thing that was very clear was that this site was being used by the older generation, the sons and daughters of veterans were often the attendees and users of the website.
So using this knowledge I created a persona called Benjamin who had failing vision, and his motor control wasn’t as great as it once was. I’m just going to play you a short clip of the website as it is now, and I’m going to use an excellent plugin called Funkify to show how this site may be for someone with poor vision and a tremor.
Using this persona I was able to ensure that the minimum font size was larger than what Europeana usually used, that the touch target area was also large and that the site was responsive allowing the visitor to increase the font size and everything would still flow naturally.
Although it is good that we can use personas, it’s also important to know that we are not the user. As Birkir Gunnarsson says, “Closing your eyes does not give you the experience of being blind, it only gives you the experience of closing your eyes”.
So I’d really suggest trying to test your site with people with disabilities. If you can’t do these tests yourself then Loop11 is one of the companies who offer unmoderated remote usability tests and can source people meeting your requirements.
But if you do have the budget, and you can source the participants then please do so.
As Wendy Chisholm states, "I encourage you to fail in interacting with people with disabilities because you will learn a bunch. You will learn what not to say and what people care about. You'll learn where the obstacles are – both the designed, physical barriers and the constructed emotional ones that exist within yourself”.
Using inclusive personas and testing with real users will help us build accessible websites, which will, in turn, enable us to fill the void and make the web a better place.
Thanks. Do we have time for questions?
Microsoft Inclusive Toolkit
Immersive Garden's 2017 wishes
Web Content Accessibility Guidelines
JAWS screen reader
NVDA screen reader
Web Form Design by Luke Wroblewski
Designing UX: Forms by Jessica Enders
Nick Jones portfolio
A Web for Everyone by Sarah Horton and Whitney Quesenbery