Introduction
You’re listening to a podcast from Media Access Australia. Inclusion through technology.
Heidi Laidler
I’m Heidi. I’m an inclusive UX designer with Media Access Australia. Media Access Australia is a non-for-profit organisation that deals with accessibility and technology.
Most of what I do is to do with websites and web apps and things like that. Designing something that is actually helpful for everyone as well as people with disabilities and so that’s not going to be something that’s more viable as a product that’s going to be more accessible and cheaper and easier to access as well. Inclusive design is better design and there’s so many examples of that.
One of my favourite examples, which someone told me about a few months ago which I didn’t know about was taps, so like in the 80’s and 90’s where you had those taps where you had to turn it and there was two, there was a hot and cold one. And most taps now, you’ve got the ones that swing from side to side and you flick it up to turn it on and that’s something that is an inclusive design because it’s much easier to use for people with motor impairment and now they’re everywhere because they’re just easier. You don’t have to adjust the temperature every time you take a shower, you can just turn it on and all those kinds of things. Text messaging; there’s so many examples of things where something’s been made as an inclusive product and it’s actually just been adopted by everyone because it’s awesome and it’s easier and it’s better.
All right, cool, I’m talking about top tips for accessibility. Usually I do a two-day workshop on this and I’ve got about five to ten minutes, so I’m going to try not to talk too fast. So I’m going to structure it as an accessibility toolkit. So four main tools and then maybe three other tools, I’ll talk about at the end but four main tools that all of which you should already have or are free to get. So nice and easy.
First tool is a keyboard; pretty sure you probably all have one of these. So pretty much what these tools will enable you to do is to test as best you can that whatever you’re making is actually accessible. So the first thing you want to use is a keyboard. Keyboards are essential for people, well they’re essential for all computer users but they’re particularly useful for people with motor impairment who can’t use a mouse. So if you’re making something that’s going to be run on a desktop, you need to go through that solution using your shift and tab keys to make sure that every element in whatever you’ve made is accessible and can be activated using a keyboard only.
And as Microsoft covered with their inclusive design toolkit, which is a really useful resource as well, things like keyboard, it’s useful for people who have a permanent motor impairment like muscular dystrophy but also someone with a temporary impairment like a broken arm or I think the example you had in your site was someone with a new baby who’s constantly holding a baby and can’t use the mouse all the time. So what you want to do with your keyboard is try navigating through everything on the site so basically focus, you probably all know what focus is anyway, but basically it’s like the keyboard equivalent of hovering on something with your mouse. So when you got to each element on the site there should be a focus indicator like a box around the thing or the object should change a little bit so you that you can tell, that’s what I’m on at the moment. So you want to make sure that the focus goes onto every single thing and then once it’s on interactive elements that you can actually activate those things as well.
Is it easy? Can you tell where the focus is at all times? Is it, are there some elements where you get to and you don’t know where it is and you just get lost? And also does it move an intuitive order? Is the focus jumping all over the page and you don’t know where it’s going to go next and every time you press tab, you have to search for it again? So you want to check that basically it’s easy.
The next thing I want to talk about is screen readers. There are a couple of different screen readers out there. There are two big ones, JAWS and NVDA. I’m talking about NVDA because it’s free and it’s pretty popular. So pretty much screen readers, the name is slightly deceptive because they don’t read the screen, they read code generally. So NVDA is a very popular free screen reader.
So what you want to go through with your website or app or whatever you’re making, this is for desktop, is try running NVDA over it and see how it goes. Does the NVDA read everything? Can it access everything and is it easy? So in terms of can it access everything and does it read everything? This isn’t just text, it’s things like images. Is the screen reader telling you what, and if there’s important images there, is it telling you what’s in those images? If it’s not, then it’s probably not got alt text or the alt text is useless. So you want to look at those kinds of things. In terms of is it easy? Is it all been read out in an order that makes sense?
Sometimes if you’ve got, the visual relationships and the order that you read things on a website is really important and it’s subconscious when you’re looking at something but all those things, all the subconscious things and the visual hints and the relationships that are visual are on a screen need to be translated. So that’s like in terms of meaningful sequence. If you’re reading something in a certain order, the screen reader should also read it a certain order, in that same order. Interface elements. That’s an interesting one about visual hints. So when I’m looking at a website, if I’m filling out a form, for example, and I see a bunch of checkboxes, I know that I can select a few things here, whereas if I see a bunch of radio buttons, I’m like, “Okay, I can only select one thing.” And someone who’s using a screen reader obviously can’t see those visual hints so they need to be translated by the screen reader. The screen reader needs to say this is a checkbox. This is a radio button, this is checked, this isn’t selected, things like that.
Also things like with relationships so headings, the screen reader needs to say this is a heading, this is a heading one, this is heading two, and those headings should be in order as well. So you don’t want to be jumping from heading one to a heading four because someone who’s using that screen reader may think that they’ve just missed a whole bunch of content. Also, lists and tables. Anything that’s got visual relationships like that between different parts of content, like a table, needs to be announced by the screen reader too. That’s probably the biggest one; screen readers I’d say.
Tool number three is colour contrast. Sufficient colour contrast is essential for people with low vision, people who are colour blind and it’s also something that’s really useful contextually, so if you’re out and about and you’re looking at an app or something on your phone and there’s a bunch of screen glare, good colour contrast is really useful and that’s an example of where so much of this translates across to just being better design in general.
So, the tool that I like to use is called the Paciello Colour Contrast Analyser. So while you might not all have this, you can download it for free, same as NVDA, both easily, just Google it, it’ll come up, it’s free. And what you want to do is test all the colour combinations on your site, so you want to look, or app or whatever it is you’re designing. Pretty much this program opens up and it’s just an eyedropper tool and you can just pick colours from anywhere on your screen. And you want to have a look at the background colour compared to the text colour or if you’ve got icons, the icon colour compared to the background colour or if you’ve got something interesting like text on top of a gradient or on top of images, you want to look at the things with parts of the least contrast and test those to make sure that they are sufficient.
The other thing I was going to mention with this colour contrast analyser, it has a really cool function which allows you to actually simulate different types of colour blindness. So there are a bunch of different types of colour blindness and most of which I can’t pronounce the proper name for. But the main one is red-green colour blindness which is in about 10% of males so it’s something that’s really prevalent, more so than people think.
A plug for Microsoft here; the last one is ease of access so they’re a bunch of settings already built into Windows which a lot of you will already have where you can basically alter different things about the way the computer words and the way it displays things to make it easier for people with different types of disabilities. The main one I’m going to talk about is contrast settings. So people with low vision, in particular someone that we worked with at Media Access Australia, will use the computer on high contrast mode, which basically changes the colours that are displayed on the screen. So if you’re looking at a website, it’s going to make the, generally depending on the settings that you have, it’ll generally make the background black and the text will be like a fluorescent blue, yellow or white. You want to make sure if you’re doing a web-based thing, you want to test your site and see how it looks in high contrast mode.
Interesting to note, you can’t use Google Chrome with high contrast mode so if your site looks exactly the same, you’re probably using Google Chrome, they just don’t work together. So using any of the other browsers, put your computer on high contrast mode in the control panel settings, whatever it’s called now, and see how it looks. So basically one of two things can happen if there was issues on your site with, an issue that often comes up with high contrast mode is if you have images of text, which is something that comes under WCAG. So basically if you’re using high contrast mode and you have images of text, generally one of two things will happen. The image of text will look exactly the same and obviously for someone who has low vision, if they couldn’t read it before, they’re still not going to be able to read it now if it looks exactly the same.
The other thing that might happen is it might just disappear entirely and there’ll just be a big, black gap where it was, which is obviously also problematic. So that’s the four main tools. There are three other tools that I’m going to mention. They just didn’t quite make the cut for the big four for some reason. Tool number one, Voice Over and Talk Back, so this is pretty similar to NVDA which is why I’m not going to cover it in a whole bunch of detail because it does the same thing. It’s a screen reader but for mobile phones and tablets. You probably will all have Voice Over and Talk Back, even if you don’t know it, if you have a modern Smartphone, Android or IOS device it’ll already be on there. It is good to test with both NVDA and a mobile screen reader because they do react to things slightly differently even though they serve the same purpose, or a similar purpose. Browser zoom; so a lot of people who have low vision will zoom in websites that may make the text bigger.
An issue that often occurs with that especially recently with the responsive websites is when you zoom in on your browser, the browser detects that the screen size is getting smaller and eventually it’ll switch to a tablet or a mobile view. When that happens, often a lot of tablet and mobile sites eliminate different elements of the site and when that happens it means that people with low vision actually can’t access those elements at all. So what you want to do if you are doing a responsive site, with your tablet and mobile views, hide things to make that, to get that minimalist aesthetics so you’re not squishing it all in onto a tablet or a mobile screen, but still make them accessible so maybe do some expandable menus or something like that. And the last one is mute. Basically, make sure that if you’ve got anything on your site or thing that you’re making, that is communicated through sound, that should also be communicated through another sense or a text or something like that.
So that’s it. Basically you want to use these tools to make sure that whatever you’re making, to test them to see if they are accessible for people with different types of disabilities to hopefully ensure an inclusive experience.
Conclusion
This podcast was presented by Media Access dot org dot au.
Go back to the ‘Top tips for accessibility’ podcast article