At Accessibility Scotland 2018, Vasilis van Gemert @vasilis described how he flipped the Paciello Group Inclusive Design Principles and turned them into a set of Exclusive Design Principles.
Instead of designing exclusively for ourselves, he started to design tailor-made solutions for – and together with – people with disabilities.
In this talk, Vasilis will show you the results of these experiments, and share all the insights he gained during his research.
Video
Slides
Download Exclusive Design Principles slides in Microsoft Powerpoint format.
Transcript
Thank you very much for that introduction. Of course I have to start with the fact that I am between you as the last speaker and haggis. I’ll just keep on talking until everybody gets really, really hungry. I’m going to talk to you about my exclusive design research that I’ve been doing in the last two years.
I usually start my talks with this illustration by Mike Kus. It’s an illustration of circles, colourful circles that he made in a book a few years ago. I use this illustration to explain why I really, really, really, like the Web as a material and as a medium. I made a Web version of this illustration.
As those of you who can see can see, the illustration can adapt to different viewpoint sizes. When the screen size is smaller, you get three circle layout, and when it’s even smaller, you get a two circle layout. I love this thing.
We call this responsive design. I’ve been doing this for years, and I just can keep on watching these videos and I get into an endless loop. We can just stop now. This will be the talk. This is what I really like, but what I really like about the web is there are more layers, more context than just the screen size. There’s the context of, for instance, other browsers.
There are browsers, some of you might remember, that don’t support border-radius. This is a CSS property. When you don’t support border-radius, you can give a textual representation of the image, which could read something like “balls, two connected balls. A blue ball” and then show the colours.
In very old browsers that don’t even support modern colour notations, you could just give the textual representation.
What I really like about this is now I can, of course, people with older browsers, they have to be creative, come up with maybe a better solution of the illustration, but the other thing, of course, is that now it is available to people with screen readers. They can hear exactly what I said right now.
“Balls, two connected balls, a blue ball, a blue ball, a red ball.”
It would be wonderful if it worked like that.
The reason why this works, why we can have these layers and layers of different context and make them available to everybody is because the Web was actually designed to be like this. It was designed to be for everybody.
This was one of the principles that Tim Berners-Lee, the founder of the Web came up with the Web, he actually said it should be there for everybody. This is very interesting. What does that mean that it should be there for everyone?
It means two things. It means it should be there for everyone to use, but at the same time, it should be there for everyone to publish on and to publish with. I think this is a paradox.
If you really want the Web that is for everybody to use, then everybody who publishes on it has to be an expert because it’s actually pretty complicated to create a website that really works for everybody.
To be honest, I don’t think it is even possible to create something that works for everybody. When you demand that everybody should be an expert, then we cannot have a Web that is there for everybody to publish on, which would be a shame.
Unfortunately, I am not going to solve this paradox for you, but I am going to talk to you about a few ways to work with this complicated medium.
Now, of course, you’ve all heard of inclusive design. About a year ago, there was this list of Inclusive Design Principles that The Paciello Group and Barclay’s, they published it.
I thought they were very interesting. I compressed them a little bit and turned them into these four principles.
What they basically say is to consider all context, which of course is a very good thing when you work on a medium that should be used by everybody.
You have to think about all the possible ways that people will use your website. This is not something that’s new. This has been happening in, for instance, economics where you think about who will you design… When somebody has to sit on a chair, short people, you should design the place where they sit on. Then you design it for longer people. You design the back for longer people. This makes sense to consider these different situations when you design a chair.
Then there is the idea of being consistent to use the patterns that people know so that you don’t confuse them.
Then, of course, you should prioritize content and adding value is almost too logical to put it in the principle, I think.
One way to test principles is to flip them. It is a good reason to look at the opposite and see if that’s true. If you can imagine another agency working with the opposite principles, it means that your principles aren’t good. It’s also a good idea to flip principles if you don’t completely agree with all of them. I flipped the principles.
Now that turns into, instead of considering all context, I say we should study situations. The reason why I say that is because we do not know the context. We are not experts in all contexts. I thought I was a pretty good designer, web designer. I thought I knew many, many contexts until I started testing with real people, and it turned out I knew nothing. I gave myself a task. Start studying situations, really, really studying what’s going on.
Since we’re not experts, I think there are no conventions that we can keep on using.
Instead of being consistent, I think we should ignore conventions and really come up with new ideas. We need to innovate, especially in the field of the Web because right now if we think this is okay, these are the conventions that we’re working with, I think the Web is too boring and we have to do something about it.
Then, instead of prioritizing content, or next to prioritizing content, we should prioritize identity, using the identity of the people that we’re going to research.
Not just their identity, but their personality and using them as human beings to give us input into how these new conventions, new ideas, what they should be like. That’s very interesting to do as well.
Then apart from adding value, we should be adding nonsense to our websites because they’re so boring, we can add a little bit of fun here and there. Not just because of the fun part, but mostly because of the fun part, but also because adding nonsense is a very good brainstorming tool. If it’s open to come up with nonsensical ideas, some of these ideas will turn out to be very good ideas and they might be the new conventions that we will work with in the future.
These are the four principles that I’ve worked with. I studied situations, I ignored conventions, I prioritized identity, and I added a little bit of nonsense every now and then.
Let’s ignore conventions and start with the second point from this list, which is ignoring conventions.
I learned my English from listening to American punk rock records back in the ’80s and ’90s.
This is how I would say it. The defaults suck. I think over here you would say the defaults are “interesting” if I’m correct.
Let’s go back to my illustration of circles. Now, I lied to you when I said that the screen will sound something like
(Plays an audio recording of a screen reader)
“Balls. Two connected balls. A blue ball. A blue ball.”
That would be fantastic if we had a little bit of control over the voice. Unfortunately, we don’t. Instead of sounding like that, it actually adds a lot of content to the web page and will tell you
(Plays an audio recording of a screen reader)
“Heading. Level one, balls. Heading level one. Two connected balls. Heading level one. A blue ball. Group. Three items.”
Whoa. That’s not a representation of this illustration at all.
This is interesting, right? I think this is not a good default. This is what everybody gets to hear when they start a new screen reader. I think we should reconsider this. I’ll come back to this later.
Then, there’s WCAG (Web Content Accessibility Guidelines) which is a fantastic piece of work. It’s an incredible piece of information, very valuable, but the way that we work with it and other speakers have said that as well, is that it is actually a list for engineers to tick off at the end. I think it’s theoretical accessibility, and it’s not really real accessibility where we design with and for people with disabilities.
I’ve seen many, many websites that are just ticking off this list. Yeah, it’s good enough. Now we get this stamp. I think that’s very unfortunate. Also, I think if you look at Level A conformance, for instance, that’s just saying, “Okay. We serve plain HTML that’s good enough for everybody.” It is a little bit too low of an ambition if you ask me. I want a little bit higher ambition.
Then there’s of course browsers that we work with and the default behaviour browsers.
Here’s a list of links. When you don’t use a mouse, you can use your keyboard to tap through focusable elements. Here you see how Firefox shows it. It will put a small dotted line around the thing that has focus. It’s not very well designed, I think, this dotted line. Many designers hate it so they ask us to remove the dotted line and make it completely unusable. I can understand them. I think here, this default is not very good, not very well designed. When you start tabbing, what happens when you get to the bottom is that the focus thing is behind the status thing. This has been in Firefox for 100 years. 200 years? I don’t know. Nobody’s seen it? I’m the only one?
I think if you look at this, the defaults, they’re not very good. It’s a very complicated material that work with, and the material itself, and the things that we created around it, and the design, the ways we design, they don’t help very much.
What I did, I asked my students to design a website or an interface for a friend of mine, Marijn. He is severely motor disabled. He doesn’t use a mouse. We assumed if he doesn’t use a mouse, he uses his tab key, right? This is what I’ve learned.
We started working. The students started designing for Marijn, and the next week he came and tested our work. I made a prototype myself, and here you can see that the focus elements stay in the middle of the screen, which I think is an improvement over the default behaviour.
I added some colour, of course, because I like colour, and I added some animation because I like animation. I guess Marijn likes that well. I’m not sure. I didn’t test that.
Marijn came the next week and it turns out that Marijn never uses the tab key. Instead of tabbing through the interface, he uses his arrow keys to scroll up and down the screen.
All the fancy things that we made for him, because I really said to my students, “We have to make a fancy interface for him,” he saw nothing of it after the first week, which was actually a very good lesson. He still comes back to me every now and then and tells me that that was maybe the best lesson that assumption is the mother of all fuck-ups, I think. Indeed, that turns out to be true in this case.
It really was interesting. He uses his laptop in a very particular way. He uses the arrow keys and then he uses his trackpad as a mouse controller. Very personal way, but that was very interesting to look at. Then I optimized it for his way of usage to make it possible to use the arrow keys to go through this list of music.
I really like this (Focus with arrow keys prototype). I can keep this video on if you’d like. Again, these things that keep me in an endless loop.
This worked very well. Here we optimized something for one person, just tailored-made for Marijn, but it turned out to work very well for me as well, and maybe some of you might like it as well.
I’m not saying that this is a new default or a new thing that we should follow, but it is very interesting the different things that we came up with. We should be studying situation.
Another thing I did was I worked for Simon. Simon is a Dutch physical product designer. He designs physical product, and he doesn’t like the Web at all. He doesn’t like his computer, he doesn’t like the Web, but he has to use it every now and then. He’s blind.
This is a very interesting combination because before I had seen many blind experts, real experts, using their screen readers, and they have superpowers. Their screen reader, it will just read their book to them at 20 times the speed, and they have read a book when they get their dog out for a walk. They’ve read a whole book. These are incredible, incredible power users.
Simon is not. Simon is not a power user. On the contrary, he’s a normal user, I would call him. Somebody who has to use technology, but is not an expert. Not a nerd like we are. I’ll speak for myself. Not a nerd like I am.
For him, this website, it adds all kinds of content again. There’s this heading level two, and another heading level two, and there are links. Every link is pronounced as a link. The worst thing that I found here is that it starts telling him that this page has 80 headings and 150 links. The link that you are looking for is one of them. Good luck with that.
Someone wants to use this website. It’s the website of all the Dutch documentaries. It’s an incredible resource. It’s very important for designers and researchers to be able to use this website.
He had never found an entrance into this website. He was never able to … How do I browse this website? Because to him, every element on the page starts shouting to him, “I am the most important thing! No I am the most important thing!” Right? All this extra information of heading levels and links and navigation items, and I don’t know what. It just keeps shouting at him. He really, literally, ran away. He didn’t want to use it. This is not the only website that’s like that. All websites are like that.
How can we solve this? Of course, we can say let’s use fewer semantics. Let’s make everything a div or a paragraph and we’re done with it. The semantics don’t get read out.
The power users will probably be looking for their rotten eggs and rotten tomatoes to throw at me because they depend on these semantics. This is probably not a very good solution, even though the people that I’ve worked with really liked the prototypes that I’ve made without any semantics. “Oh, whoa. This is relaxing. Now we can just listen to the content. This is okay.”
Another thing would be to flip the defaults, the default settings of screen readers. I think they’re not the right settings.
Right now if you start a screen reader for the first time, it will read out all the semantic HTML. It will tell you that something is a heading level. Not everybody knows what a heading level is. I’m sure that some of you probably don’t know what a heading level is. “What’s he talking about? Heading levels? What are they?”.
For instance, my father, an academic, has been writing papers all his life. He only understood what heading levels were once he wanted to publish his things on the web. When I explained to him markdown, that’s when he learned what heading levels are and that actually you can give structure to your documents. This was new for him. It’s not something that only … It’s something that people don’t understand, so why should we flip them on by default? This is clearly a power feature, so this is something that screen readers, I think, should change.
Then we can use, of course, we can add new types of intelligence to these screen readers. For instance, what I found is that heading levels, when they are used, are not used properly that often.
Very often, it’s just a random usage of numbers. Even if you understand what heading levels are, they’re not of very much use because they’re not used properly.
What if we used the visual hierarchy instead and let the screen reader look at the visual hierarchy of the page because that is usually not perfect, but maybe a little better than the HTML.
This is solutions, not very practical long-term solutions, but interesting ways to look at. I think the real solution would to be recover this article by Brad Frost.
A few years ago, he said death to bullshit in which he said to stop putting all these things onto the Web that we don’t really need. Stop putting all the marketing stuff on there and just get the people to their content. I would say more death to even more bullshit, because when you design for blind people, there is too much on there and we should get rid of it.
I practice what I preach and I, this is a redesign of the website that you saw before. This is what I made for Simon, and it basically says, I’ll keep it short.
On this page, you can find documentaries via themes, makers, and locations. When I gave him this prototype, he said, “Can I actually browse this website via themes, makers, and locations?” He didn’t know that. These were three of the 150 links, and he had never found these three links. He started browsing. It actually looks like our websites back in 1999. I’m not sure if that’s what we should go back to, but it was very easy for him to use.
After a few clicks, he comes to this webpage. This is actually the website itself, but with JavaScript I removed all the things he doesn’t need and I added a big yellow button. Now, Simon is blind. He’s really blind. He doesn’t see anything. The button can be invisible, but I made it yellow because I like yellow. It says play. Some of you might see that in the middle there is something that resembles a play button, a blue button with a triangle in it. It’s not a button. It is a div with the letter Q in it, and an OnClick event. Even if Simon one way or another had managed to come to this page, he had never been able to play the film itself. That’s why I had to add this button, and that’s why it became a pretty complicated prototype, to be honest. When you press the button, it may play the film, or it may tell you that, unfortunately, you need Adobe Flash to play the movie. I cannot solve everything.
This is still studying situation here. This website is not the only one that does this. I think this is really something that we have to think about. We have to study situations to look at the design …
How do you call them? The conventions that we use. For instance, under the Guardian, if you link to a webpage about how to turn pumpkin seeds into a protein-rich salad, how many heading levels would you expect there?
I would expect maybe two or three because there’s not so much to tell about this subject, I think. Maybe books can be written about it, but in a small article, maybe two or three headings.
How many links would you expect on a website like this? A few?
Well, there ar 580 links on this website, on this page. An article page. 580. You have to skip past 40 to get to the content. There are 40 links before you get to the content.
Of course, there is a skip to content link there, which is something that we invented as an accessibility feature.
I didn’t really test this link, I just watched Simon using websites. When he was skipping through a website, he just ignored the skip to content link. He ignored it completely. I thought, “This is for you. Why don’t you click it? It will help you.”
He ignored it on every website where there was a skip to content link. He ignored it. I asked him after a while, “Why don’t you use these links?”.
He said
“What are they for? I don’t know what they mean. What does content mean?”
He doesn’t know. I thought that was just fascinating that we keep on copying these patterns that other people use.
I have been copying them myself as well. I have been putting skip to content links everywhere. It turns out that maybe we should look at it differently.
There has been a discussion a few years ago about if designers should learn how to code. I think coders should learn how to design as well.
We should be more critical when we look at the things we copy and paste. We should demand that we can test the stuff that we make with real people who really use our stuff.
As Stephen Hay said
We’re developing expertise in choosing rather than in thinking.
I think this is really, really dangerous at the moment, that we really keep on copying elements that other people have tested without really considering does it even make sense in our context.
Does it make sense to use what Facebook does on our small community website? Of course, it doesn’t. We have to investigate this ourselves. I think one of the ways to do this is to use the identity, of course, of the people that we work for and that we design with.
Onto the next project, very interesting project.
A Dutch photographer, Hannes. About 15 years ago he turned blind.
What do you do when you’re blind as a photographer? You start doing other stuff. He started making audio objects. He walks around the city or he walks around other places and records the audio and makes audio collages of them that you can listen to. Very nice project. Very nice to listen to. They give a nice impression of a part of the city, for instance.
He wanted to show me his websites where all these things are on, and then indeed, again, he had to skip first past all the navigation items.
If you’ve listened to expert screen reader users, they go really fast. It’s not really a big deal to go past ten links. Hannes has his screen reader very slowly because he has to listen to everything, think about it, “Is this the thing I’m looking for?”
Then go to the next one. Real slow project to go to that heading level that he was looking for.
I redesigned this website for him. We had a few sessions. We talked to each other, and I added his personality to it.
With Simon, it didn’t really go beyond the functional. It was just plain HTML without any semantics, just links. Here, I added his personality to it as well, it turned out to a visual thing, but it’s also there is a very easy audio player. It’s just a button that you can press and then it plays. When you press it again, it stops the audio.
I added colour because he used to use a lot of colour in his colour photography, lots of white space, lots of contrast, because he can still see a little bit, so then he could see the letters that I was using, and he really liked these friendly looking sensory type that I used.
This was to me, it was not very hard. It was nice to work with him and to come up with such a design, but it’s not very special. It was good to use his input to come with a better, more personal website.
Then I asked Hannes, is there may be something we can add to this website? We’re done. It’s functional. It looks nice. We’ve added your personality a little bit, but are there things you have been thinking about but you don’t dare to tell me because they’re nonsensical, they don’t make any sense?
He immediately had his answer ready. “Yes, I want you to add animations to my website.” Animations? Yeah. Animated illustrations. They have to be funny. You cannot see them. Why should I add animations? “Yeah, but other people will see this website, and illustrations are nice, and animations are temporal as well, just like my audio. It makes sense to add animations, illustrative animations.” Okay. You want me to make invisible animations. I don’t know where to start. How do you do this?
The WCAG (Web Content Accessibility Guidelines) would tell me make the animations, then describe them, and that’s good enough. I said no.
I am working for Hannes here. Hannes is here, so I’ll flip things around. I like flipping things around. I’ll do it the other way around.
I’ll start with writing what the animation is like, then see if Hannes will laugh, and if he does, only then will I start making the visual animation. It’s actually a pretty clever way to work. Making a visual animation is a lot of work. Writing a small story about it is very easy.
Here’s the first one. It’s about the ferries of Amsterdam. I hope the sound works. This is what it sounds like for Hannes.
(Plays audio recording of screen reader)
Ha, look at that, two ferries are flying from one side of the screen to the other bouncing. Boing, boing, boing, boing, against the sides of the browser.
Okay. It works a little bit. Hannes was actually laughing when he heard
(Plays audio recording of screen reader)
“Boing, boing, boing, boing.”
He was like, “Oh, wow.”
Screen readers are very boring. Very boring. Yeah. They’re boring. They’re neutral. There’s no emotion, and they have to be of course.
When all of a sudden this thing started making weird sounds, it works. That animation worked. For those of you who can see, here’s the animation, the visual animation, and there’s two ferries bouncing.
I think the vocal one is better, right? This is just boing, boing, and the other one, it’s “Boing, boing, boing, boing.” I had a lot of fun making these. Here’s another one, an animation about a hammer. It sounds like this.
(Plays audio recording of screen reader)
Ha ha ha ha ha, so funny. All of a sudden, there’s a hammer that slowly ticks the text to the right.
Ha ha ha ha ha, so funny. All of a sudden, there’s a hammer that slowly ticks the text to the right.
He was laughing.
My screen reader was laughing? Ha ha ha ha ha? What’s that?
Here’s the animation, which is the next iteration. It doesn’t really tick the text to the right. It ticks it down, but the thing that he really liked and the thing that I got out of this was that you can make screen readers laugh.
You can actually design for screen readers. It’s a bit complicated.
I’ve started this project. I’m still working on it, but you can add strings to a website, and if they make your screen reader laugh, you then submit that and then we get a big international database of snigger strings. I don’t know, how do you call them?
It’s actually pretty weird because that one up there, “Ha ha ha ha ha,” I used that one. That was the example. I wanted to use Fiona the (VoiceOver) Scottish voice. She doesn’t sound like laughing when she says, “Ha ha ha ha ha.” It sounds good when she says, “Boing, boing, boing, boing,” but not when she says, “Ha ha ha ha ha.”
Then there’s this one here. “Ha ha ha ha ha,” in Dutch sounds really good. “Ha ha ha ha ha,” that’s what you want. In English, that’s “Ga ga ga ga ga.”
That’s not good. It’s an international … It’s very complicated. Much more complicated than I thought. When it’s ready, I’ll put it online and you can help me fill this up so we can start designing funny stuff for screen readers.
Okay.
(Plays audio recording of screen reader)
“Boing, boing, boing, boing. Boing, boing, boing, boing.”
Remember that.
(Plays audio recording of screen reader)
“Ha ha ha ha ha ha. Ha ha ha ha ha.”
I’m really looking for feedback on this because this is the research I’m doing. It’s ongoing research. If you have any ideas, if you disagree with stuff, or if you have any additions to what I do, please contact me at Vasilis@vasilis.nl, or you can find me on twitter @Vasilis. I’m looking for all kinds of feedback.
The tools and the examples that I showed that are ready to share are on VVG.GR/QR. There you can find all the tools and the examples that I showed you. You can download them and test them yourself.
That was it. Thank you very much.