At Accessibility Scotland 2018, Hampus Sethfors @hampelsuken travelled all the way from Sweden to tell us his five top-notch tips on designing accessible interfaces and teaches us why many design trends exclude people with disabilities.
Video
Slides
Download Hampus’s slides in Microsoft Powerpoint format.
Transcript
All right. Can you hear me even if I walk around the stage? Yeah, good, good. So yeah, good to be here, all the way from Stockholm, Sweden.
My name is Hampus, and it’s always tough for me as a Swedish person to come speak abroad, outside of Sweden. I’d like to start off with an apology on behalf of all my people, all Swedish people, for the countless of hours you have spent putting together your own IKEA furniture. I know it’s not as fun as it looks. I am truly sorry about that, and I hope you can move past it and accept me as your speaker.
Then I realised, hey, I’m in Scotland. You’ll be more forgiving of me because you guys know what it’s like to invent something that ruins people’s lives because you guys invented golf.
Yeah, the worst sport in the world without a doubt.
Here’s a video actually of my dad swinging a golf club. He’s normally a really calm, nice guy, and he misses the shot, it just pops up a few meters, and you can see how he just loses it. He’s jumping. He didn’t know I was filming him and he doesn’t know I’m showing this to you. The point is it brings out the worst in people.
I hope IKEA and golf we can call it even.
All right, I’m going to teach you some Swedish now. If you Google Translate accessibility it’s, you get tillgänglighet, the Swedish word. It’s a quite strange word. We have also taken the short version of accessibility a11y and made it t12t because there are 12 letters between the Ts in the word tillgänglighet.
I actually run a meetup in Stockholm that’s called the t12t meetup. If you’ve ever in Stockholm, we have this four times a year. You’re more than welcome to come. Or if you just want a exotic accessibility sticker, I will hand this out to you, like to the tables. And you can put them on your laptop or where you work and maybe someone will come and ask you about what’s that and you can start talking about accessibility which is great.
Something else about me. I’m a big accessibility nerd.
I own eight accessibility T-shirts, and I have one on me that’s the wheelchair Batman and there’s one on the screen, that’s the a11y cats, cats with different abilities.
Yeah, I really like that. I also happen to run a company focused on making the digital world more inclusive place, so AxessLab, access spelt with an X because it sounds cooler with an X and because the correct spelling wasn’t available as a domain. Yeah, so that’s me.
Before I jump in to the main content of this, I just want to say if you want the slides of this talk, then you can go to axesslab.com/scotland or just point your phone and the QRC code will take you straight there. It might be easier to follow along in your phone if you want that.
All right. All right. I’ll start with a story. It’s story time. It’s the story about an angular consultant and my colleague Daniel when they have lunch. One thing you can see, Daniel on the screen there. One thing I need to say about him is he’s a front end developer, but he has a vision impairment which he doesn’t talk about the first time you meet him, you can’t tell by just looking at him. He tries to leave that to a later discussion because otherwise he gets the same old questions all the time.
This angular consultant had met Daniel just a few hours earlier, but he had not talked about him having a visual impairment. But then they sat down to lunch and I was there too and the conversation went something like this.
The angular consultant says,
“Why do you look at your food so closely?”
Daniel’s like,
“Yeah, okay, yeah, to see what I’m eating. I’ve got a visual impairment.”
This is new to the consultant. He’s like,
“Oh, oh, I’m so sorry. That must really suck.”
Daniel is quite used to this, so he’s like,
“Nah, it’s not a big deal. I barely think about it.”
But the angular consultant, he couldn’t really let this go so he was like,
“But it must make life so difficult, this vision impairment.”
Daniel, answers,
“Well, no, it really doesn’t, just trust me on that one.”
Then the angular consultant came up with a brilliant idea and he said,
“Have you tried glasses?”.
Daniel said,
“Thank you,”
and he realized he could fix his vision with glasses and he lived happily ever after.
Of course not.
He said,
“No, that won’t help with my eye condition.”
The angular consultant said,
“Laser eye surgery,”
and again Daniel said,
“No trust me, that won’t work either.”
Then he continued this conversation with the normal questions Daniel almost always gets, which is like how much can you see and how do you code if you can’t see that well? Daniel goes on his same old story that he tells for the millionth of time and I don’t want to go into it because, yeah, it’s not important.
Then after the story is done, this consultant, he says,
“You’re such an inspiration. I could never do what you do,”
which is he’s saying it to be nice of course, but it comes off in a strange way when you really think about what he’s saying.
Daniel is like,
“Okay, I think I have to get back to work now.”
He’s getting tired of this. The angular consultant ends the discussion with,
“Hope you get well soon,”
and Daniel was a bit confused.
Kind of funny conversation, but it’s not uncommon. These things, these attitudes are out there and they happen all the time for people with disabilities. We’ll look at some more here.
On Reddit there was a thread that said: Disabled people of Reddit, what is something others do that they think helps but it really doesn’t? Many people answered and voted, upvoted different replies. I went through it and looked at some common patterns in this. Here you have some of them.
Paralysed from the waist down eh? A raw food diet would clear that right up in no time. Genius. Genius.
And the name of this talk, just dab a little coconut oil on your spine and you’ll be able to walk again. And then there are many like come to my church and we’ll heal you and things like, trying to fix people.
Then there were quite a lot of replies about being an inspiration. I’m being praised for doing normal every day stuff. What am I supposed to do? Sit on my ass all day and wait to die? Another in similar fashion. Don’t say that I’m brave or an inspiration. Be your own damn inspiration. This is not something people with disabilities like when you call them an inspiration when they haven’t been inspiring, just doing normal stuff.
Then one of the most upvoted comments was just one word, and it was pity, like pity, feeling sorry for me. This is very common.
You saw it with the angular consultant feeling sorry for Daniel and you’ll see it everywhere, people tell stories about just like walking on the street and someone comes, hands them a dollar bill on the street, like sorry for you being, having a white cane and then they’re like, “What? Why? I didn’t ask for money. I don’t want money.” This is, it’s very common. It’s not that people are trying to be assholes. It’s just … But it comes off in that way. Stop feeling sorry, calling people an inspiration, and trying to fix people.
What should we do instead? Well, that’s the main thing in this talk that we’re going to focus on, my top five accessibility tips for designers.
I’m a UX designer. That is my educational background. It’s going to be a lot about design, yeah, but I think it’s going to be many of these tips will be applicable for other roles as well.
I love lists. Don’t you just love lists on social media? It’s just like top 10 cutest kittens or something. Let’s go all in on that and say you won’t believe number four. You’re never happy when you get to the number four. You’re always, Oh we’ll see, we’ll see.
Tip number one, focus on changing attitudes.
You might have thought, hey, design tips, I thought you were going to talk about color contrast and stuff. No. Let’s make it, you can make a bigger difference than that. Focus on changing attitudes. How can you do that practically? Well, one thing is you can work with representation. Here on the screen there’s a illustration of a woman in a wheelchair being nice to a friend who’s not in a wheelchair.
What’s really unique about this illustration apart from that well there’s a woman in a wheelchair which you barely ever see in any type of communication, but the really unique thing is it’s from the Swedish Youth Clinics page about friendship. It’s about friendship, and there is a wheelchair user but not a single word about disability. This is very, very uncommon. If people with disabilities are represented in some kind of communication, it’s always as a representative of their group, of people with disabilities. But here it’s a page about friendship and it just happens to be a girl or woman in a wheelchair who gets to represent that, and that changes attitudes.
There’s other great illustrations on this site. Here is a girl with Down Syndrome on a page about interests and there is a couple being intimate with each other where one person in the couple is in a wheelchair. This is really, really great, but really uncommon as well. Get inspired.
One thing you can do like simple thing is if you use some kind of stock photo site to get images on your products. Then you can check these out, Photoability and you can go to Unsplash and search for disabilities. There are more diverse stock photos on these sites, so it’s a simple way of improving a bit.
Then regarding attitudes as well, why have you got so few colleagues with disabilities?
Because I can guarantee that most of us work in places where people with disabilities are underrepresented even though we care about accessibility. This is a really big and interesting topic, but one thing you can think of is maybe there are small things like color …
No, they are not color. Dress codes which exclude people. So maybe someone who is sensitive to different impressions, they might need a cap on or a hoodie on or head phones on, and maybe that’s not okay because you need to look in a professional way or something, and then without knowing it you will exclude some people who cannot work there, Or you working in open environments where you sit in really busy places, that will also be a really tough one on some people with maybe autism or ADHD or other cognitive impairments.
Then you can look at your job ads. Usually they look something like this. To qualify for this job you must fulfill these three million requirements. Number one, be extremely social, number two, love working on your own, number three, 20 years of work experience, number four, 10 years of university studies, et cetera, et cetera. Maybe you’re like, well all know that you don’t really need to fulfill all of these. You read between the lines and you understand that, hey, this is a wishlist, but it says you need to fulfill them.
One perspective on this is that studies have shown that a man who just fulfills 70% of this list will be more likely to apply for the job than a woman who just fulfills 70% of this list. That’s one perspective. But another perspective is what if you take everything literally and can’t read between the lines and have trouble with social codes and things like that.
Then it says you need to have 20 years of working experience. Now I only have 19 so I can’t apply for this job. So really think this through before you putting it down in a job ad. Are these really, really required or are there … can you make them more soft, softer values here?
All right, so that was tip number one, focus on changing attitudes.
Let’s go to tip number two of five. Focus less on the WCAG, the Web Content Accessibility Guidelines.
That’s bold to say in a room full of accessibility advocates.
I’m not saying don’t focus on them at all, but focus less on them because my experience is that this is the regular process that most developers or designers meet when they get into accessibility. They first look at the WCAG guidelines. Then they might look at some tools to help them comply, maybe automatic testing tools and stuff. Then they might if we’re lucky look at some assistive technology, and finally the users are there on the horizon somewhere.
What’s the problem with this? Well, for one, these guidelines are really long and quite difficult to get through. You probably know it if you’ve looked at them.
How long are they? I checked it out by copying them into a Word document and then zooming out and you got this. This is 98 pages of web content accessibility guidelines, only text, and at the bottom half of the pages there are blue things that represent a link to how you actually the technique for actually fulfilling the criteria, so it might be a thousand pages if you look at the whole thing.
These are great, but it’s not a great way to start because people will get scared away by the WCAG guidelines. There will be a ghost coming out, boo, and people will be like, “Oh, this does not sound like something to get into accessibility.” So we need or I think we need to change the way we approach this or change the way that people get in contact to accessibility.
Switch it around, focus on users first. Then maybe learn some assistive technologies. Then see what tools can you use to help these people or make your site more accessible, and then you have the WCAG guidelines in the background. That’s a much better process according to me. Let’s look at some examples.
Here’s a user test where we focused on the users. This is a person with Parkinson’s. His hand tremor and he’s trying to swipe this list of calendar events and he’s accidentally tapping on the clickable objects. He’s trying to put his finger between the touch targets, he’s hoping there’s some space there to put his finger down and then be able to swipe, but he doesn’t succeed because the whole screen is filled of clickable objects.
There are touch targets back to back like illustrated here. The only thing we did to improve this site was to add some padding between the touch targets, small, just a few pixels of free space where you can put down your finger, and if you tap, you won’t click on something. This is not in the WCAG guidelines. But it’s a really simple thing to help many users with hand tremors.
Another example here is hotels.com where you enter city and there’s a great function that’s like find my location, an icon to the right of the search field. They’ve actually done a great job doing, like making an aria-label here that says Use my current location. This makes the function of this feature will be read up by a screen reader or put into braille and it will be accessible to many users and the WCAG is like, yeah, this is the shit, this is what we should do. So, so good.
But the thing is when we actually test this with users or with a screen reader, they’ll not be as impressed because they’ll look, they’ll see, first see that the form field where they’re supposed to put in the city, start typing and not see that there’s a function afterwards, so they’ll not even find that function, that feature. Even though it’s coded correctly, the user experience when it’s actually used it’s problematic.
Instead, you need to think about maybe the order in which these fields get focused or having like a relationship between the first field in the label.
You might say something like there’s a feature after this field where you can just click a button or something like that.
The point is the WCAG loves this but it’s not perfectly accessible when you actually test with users.
Focus less on the WCAG guidelines.
Let’s look at my third tip.
Soon we’re at number four.
Be careful with trends, be careful with trends.
Let’s look at another social media thread. There was this woman who asked on Twitter a while back: If you have a disability, what’s the hardest thing about browsing the web? And there were many, many, many replies and I realized many of them had to do with different trends. Here we’ll look at one.
Nearly blind in my left eye. So tiny, thin font with low contrast to the background. There’s a trend going on right now not only in living rooms around the world, they have this bright and light trend, Scandinavian design, you can’t even see where your sofa is. So sorry about that too.
But that’s on digital interfaces as well. Here we have Squarespace where they say stand out with, yeah, a professional website portfolio or online store. It might be hard for you people at the back to read it. It’s like, really gray font on light gray background and thin. If you have, if you put like a blurry filter above it, it would be impossible for you to read. This is a trend that Apple coined but they’re going to back from it and I hope the rest of the internet follows as well.
Related to this, lack of contrast between font color and background color, photo backgrounds that overpower the text on top of them. Let’s look at this. This is quite trendy right now. You have this white text on lightly colored blue background or yellow background and at the bottom there is a photo background and it says need inspiration and it’s really hard to even notice that there is text there because of some part of the text’s fading away against the background. White on light colors is a problem.
Then we have this, new thing, material design input fields. You’ve seen them. Let’s take away the box and make a line instead where you’re supposed to input your data. Let’s make instead of having the label sit above the text field, let’s put it right on the line. So what happens here when users, like when we test with older users, they’ll press below the line because they think, “All right, that’s usually where I press, like under the label.”
But you’re supposed to press above the line, on the label to be able to input data. So how to take something that works perfectly fine and ruin it, and now it’s everywhere because Google is doing it and then it must be great. Well, it isn’t. This is a problem.
Then here we get two poop emojis. They are on parallax scrolling because it’s so bad. When you scroll and the background scrolls slower or faster than the foreground and things jump in from the side and it looks really fancy, this is terrible from a user experience point of view and it’s terrible from an accessibility point of view as well, especially if you have problems with your balance or your ability to focus on something. Yeah, not great.
Before you jump on a trend just like Google’s, the trend parallax scroll and accessibility, read up on it a bit and see are there problems here that I need to address or think about, or test it with users before actually jumping on the trend.
That was number three. Here comes number four, what you’ve all been waiting for.
Play with balloons.
Oh, that’s really strange. It must be strange number four. I’ll get into it soon, but I’ll talk a bit about cognitive impairments first.
It’s hard to understand what a cognitive impairment like autism or ADHD or things like that could mean to people, but here is a comparison that I think is good that you can think of stress beakers. A person without autism might have a really big stress beaker, it fills up slowly, and a person with autism might have a really tiny one, it fills up very quickly.
And the person with autism might have it fill up because of different things than the other person. Someone typing, like you can hear the sound of your neighbor typing on a clickery, clickery keyboard, or a fluorescent lighting, or blinking ads.
Then you can understand that maybe you don’t have energy enough to fill in the form or deal with this usability problem on the site because you’re already overloaded.
But it’s still hard to grasp. It’s easier to try and understand what it’s like to not see well because you close your eyes and you can get a sense of it.
But cognitive impairments are difficult. Someone with autism said this, “It’s like I’m living in a live broadcast with no pause button.” So I can’t pause, I can’t pause to process everything that’s going on around me.
One exercise I came up with to get a sense of this is a balloon drill. This balloon drill, in this drill you take a balloon, you try and keep it in the air while you’re at the same time using your phone or you pass a balloon between a couple of people.
I have a video of that, some students I’m teaching accessibility to. Yeah, so they’re passing around the balloon three and three and they’re trying to complete a task on a site or in an app. You get distracted all the time and you don’t have enough energy.
I think all IT teams during acceptance testing should bring out balloons and you’ll pass them around and is this feature easy and intuitive enough to use while we are doing this then you’re fine. Play with balloons.
The fifth and final tip from me, it’s related to this one, it’s empathy through simulation.
Curt talked about this in the first talk where you have empathy labs walk around and try different assistive technologies and stuff.
But the problem is you can’t all go to an empathy lab, maybe they’re only in Manchester or in Edinburgh. Maybe you need an empathy lab in your computer.
That’s what me and a team in Sweden built. We built this simulator called Funkify.
Here you can start different simulations, like you can put on a blurry filter and view your site through a blurry filter, or you can have like a dyslexia simulator where your letters jump back and forth, or view it through a small lens to get the feeling of screen magnification, or have some color vision deficiencies like view it in grayscale or green weak vision. What more? Like sunshine on your screen and things like that.
I encourage you all to try this. It’s a Chrome extension. You can just go to the Chrome web store. It’s totally free, and try it out, Funkify. Funkify your site.
I want to add also that after empathy drills and simulations, you really, really, this is important, you really need to talk about the feelings that arise because many people will feel pity or they’ll feel like, “Oh, it’s so inspiring that these people can get around,” and you need to talk about those feelings and try and change the energy, change the focus to start removing barriers and prioritizing accessibility instead so that people don’t just do this drill, some exercises, and start feeling pity and then walk away with … That would not be good.
All right. Summarized my five tips are:
- focus on changing attitudes,
- focus less on the WCAG,
- be careful with trends,
- play with balloons,
- and get empathy through simulation.
Lastly, I would like to say thank you for having me because Scotland should really be at the forefront of accessibility. I don’t know much about Scotland, but from a very young age I’ve known that independence and freedom is part of who you are, and I really wanted Braveheart image in here somewhere.
So thanks for having me. Yeah.