25. Designing for all: The importance of website accessibility

Introduction

To help you create quality websites that convert, download the free storytelling website wireframe, which includes storytelling structure and techniques we discuss in our episodes, here (or copy and paste the link below):

demodia.com/storytelling-website-wireframe

---

Join marketing experts Simon Harvey and Daniel Kleber on Authentic Marketing, the biweekly podcast that provides proven marketing tips to improve your marketing efforts and help your business grow.

Subscribe to our biweekly episodes dropping Friday on your favourite podcast platforms like Apple Podcasts, Spotify, or any other.

Book a consultation with our Authentic Engagement coaches to help you navigate through the jungle of the business world: demodia.com/sales-marketing-review

Demodia Instagram: instagram.com/demodia_digital

Demodia LinkedIn: linkedin.com/company/demodia

Episode Transcript

Imagine yourself trying to walk through a dark forest with no torch. That's the daily reality for visually impaired or disabled individuals when they visit your website. In today's online world, crafting accessible digital spaces isn't a mere act of courtesy. It's essential. Website accessibility ensures that people of all abilities can access and use your site effectively. Regardless of any limitations they may have. Today, I'm joined by Dylan Barrell, author of the Agile Accessibility Handbook and CTO of Deque. We delve into the ethos of accessibility, unravelling strategies not just to elevate your website's usability, but to align your brand with empathy, responsibility and forward thinking inclusivity. Website accessibility is not only a moral and legal responsibility. It's a strategic powerhouse for your brand. So let's light the way to a more accessible digital world. Let's get started. Hi there and welcome to the Authentic Marketing Podcast in association with Demodia, where we give you actionable advice and help you to create marketing that works. I'm your host Simon Harvey and I'm joined by my co host Daniel Klaber. Hello,

Simon. Hello, listeners.

Hi there, Daniel. Good to have you back again. How was things? How's your weekend been this week?

Um, actually, it was good, thank you. We didn't do much, just a bit of shopping.

Yeah, good to hear. You go anything, you get anywhere special. Any big buys this week? No more sort of wingsuits or anything like that, I hear?

No, no big buys. Um, just regular clothes and food. We were over in Dornbirn, if you know

it. Um, yeah, I've been over there, just over the border a couple of times. Very nice little place.

Yes, it is a really nice old town with loads of historic buildings and there's this traditional butcher's shop that I visit every now

and then. Oh, you'll have to tell me more about that,

yeah. While I was there on Saturday, this guy in a wheelchair came by and wanted some meat. Uh huh. But because the only way into the store was up a stair at the front entrance, he wasn't able to get in.

Ah, I can picture what you mean actually, yeah, knowing what the town's like there. It's a older sort of town, isn't it? So I can picture with those old buildings, they often have a step at the front, so. Yes. Yeah, it's not really great design, is it? They don't really consider those sort of things.

No, not at all. Thankfully, though, the butcher is a really nice guy, and he went to the front of the store and served him from there. Mm hmm. The guy seemed happy enough, but it's not really ideal for someone like that to have to put

up with. Yeah, yeah, I could understand that, definitely. So, not being able to buy something when you need it, especially something like as important as food, just because you can't get up the front step. I mean, that's far from ideal, isn't it? Yeah. But at the end of the day, I think it's quite amazing. How often disabled people just aren't considered though, uh, I've got another example for you here. I don't know whether you've ever looked outside the window of the office onto the main road, but um, a couple of weeks ago, well we got a pedestrian crossing there basically, and you know it's got pedestrian lights and stuff, but a couple of weeks ago there was a disabled person and a wheelchair there trying to cross, and it made me realize actually that it's just got a standard curb, it doesn't actually have a dropped curb at that point in time, and this poor guy He got down onto the road. He got across the road in the time that the lights took to change, but he couldn't get back up the other side. And the lights had changed to green well before he managed to roll himself up the curb on the other side. So, you know, people really need to think about that sort of stuff. It's just not right. Definitely. Yeah. And I think the same is true with many websites too, you know, the usability. And accessibility of some sites is just so bad they really don't consider people that you know can't read or not even can't read that just maybe have slight loss of sight something like that anything.

Yes life must be very hard for those people especially if you don't consider those when creating a website or anything else you know. Accessibility is really important in all aspects in our lives. Yeah. Whether physical or online. I've had experiences like that too and I have to say that I don't spend much time on sites if I can't do what

I need. Yeah, that makes sense. If I can't do what I need, I can't find what I need, I quickly leave as well.

Yeah, and everybody has different needs when they enter a store. Just like the wheelchair user we mentioned before. And as a business owner, you want to make sure Your store is accessible for everybody, so they can buy your products or services easily. Makes sense. In the case of the butcher, he could perhaps have built a ramp which wheelchair users could use to get inside the store. For websites, it's a little bit different. There are no physical barriers that keep people from entering your store, but there are other technical aspects that you need to consider. For example, how about when someone blind or just with poor sight comes to your site? They may need to be able to use a screen reader to consume your content. Yeah, I mean,

you talk about somebody blind. I don't think that it necessarily needs to be blind. Anyone of a certain age like myself, you know, somebody that should really be wearing reading glasses, but really just can't face the truth. Yeah, I can tell you that just having poor contrast or small fonts on the sites makes it really difficult for me to read things these days. You know, text gets blurry and you can't see those things. So, yeah, it really means that implementing accessibility within websites should be a standard thing. It's not just about thinking about what we would typically label as disabled people inside there. You know, you've got to think about everybody. There's various different levels of disability within the population. And you need to make sure that your site's accessible for all potential customers, and not just the ones that are fully able. Interesting thing actually is I think that there's some countries that have started to take this a little bit further than others. For those that are listening in in the UK, there are some potential laws over there that are already in place regarding website accessibility. So the Equality Act that goes back to, I think, 2010. It prohibits discrimination based on disability basically, uh, means that, yeah, organizations have to take reasonable measures to provide equal access to all. So that means making sure that your site is equally accessible to people that have to use a screen reader. Or aren't able to physically click on things themselves, or even just they're using it from a different device, potentially, you know, not just the desktop, but also from a mobile device where they're tapping on things. So, you know, I talked about this, there's legal responsibility. I think you're unlikely to be fine for this sort of thing. But at the end of the day, the question as a business owner, you've got to ask yourself is whether or not that's what's driving, you know, legal consequences shouldn't be the thing that's driving you when it comes to this sort of topic, you know, as a business owner, you need to demonstrate your commitment to equality and, you know, you need to serve everybody equally. That's

interesting. I didn't know that countries already had regulations regarding website accessibility. Yeah,

very definitely. And I think for conversation with Dylan in a bit, we'll learn more about that.

So accessibility is a much more important factor than one would think it is. Making your website accessible for everybody may cost you some resources initially. But not investing in it will cost you a lot more in

the long run. Yeah, yeah, I think that's absolutely true. I couldn't agree more. So, going back to Dylan that I mentioned a minute ago, that's really why I wanted to introduce listeners to our guest today, Dylan Barrell. So, Dylan's the author of the Agile Accessibility Handbook and also the CTO at a company called Deque. which is one of the world's leading authorities when it comes to website accessibility. I had the chance to sit down with Dylan last week and he gave me a really thorough introduction to the benefits of website accessibility and what it means to organizations and what it means to make accessible content.

My name is Dylan Barrell. I'm a chief product officer at Deque Systems and I've been doing accessibility for the last 14 going on 15 years. I founded the Axe Core open source project and I also wrote a book on accessibility called the Agile Accessibility Handbook. My mission, if you will, is to help make accessibility sustainable. In particular, in organizations that are doing agile development or agile deployment of websites or web applications, mobile applications, etc.

Cool. So we've introduced a little bit earlier in my conversation about website accessibility, but maybe in your words, you could explain about what does website accessibility mean? Why is it important for businesses generally? Why should they care about this?

Well, what it means is essentially when it comes down to just making sure that Everybody can have access to all digital experiences in an equal fashion and can participate in online life, which has now become a, essentially, a central part of life, equally and independently. That's very important, is the independent thing, right? That's really, it's cool what accessibility is about. And the reason it's important is, it's a human right, first and foremost, so that's important. But it's also for organizations. looking to compete. If you pay attention to accessibility and usability, which is closely related, then what's going to happen is, in so far as the usability of your website increases your conversions and increases your capture of customers and market share, that will help. And the flip side is if your competitors are doing it and you're not, then obviously you're going to be at a disadvantage. And just to give you an idea of The numbers of people, it's about 15 percent of people in the world that have some sort of disability. So we're talking about over a billion people. That's a lot of people. Yeah. Yeah. And in countries like the European countries where the population is aging. The numbers are even higher because disabilities increase

with age. And what do you consider as impairments, I guess, would people typically have that we need to consider or that are considered underneath this sort of accessibility

typically? There's kind of the big three, and then there's a lot of other disabilities on, around the edges, and Every disability is a continuum, right? So, you know, there's, just take sight for example, there's people with 15 20 vision, right? It's better than 20 20 vision. And then there are people that are completely blind, but in between that, there are all sorts of different degrees to which people are able to see, right? So, if you're legally blind in a lot of countries, you can still see quite a lot. And then there are other disabilities that people may have multiple disabilities, so we may be deaf and blind at the same time, right, so that introduces additional complexities. But it really covers all physical things that allow us to perceive, so it could be things like sight and sound, the things which allow us to understand. So it could be mental disabilities, like it could be learning disabilities, it could be dyslexia. And then, of course, there are physical disabilities that impair our ability to operate certain types of devices. So, think of Stephen Hawking, who had very limited movement at all, people who may not have any hands. So, it really covers the gamut of all those sorts of challenges, impairments, to the average, what we would consider the average abilities that most people have.

Yeah, because I think a lot of people think about disabilities and they think about purely blind and stuff But I think, you know, just taking my own case, for example, you know, getting to that certain age now We're starting to need glasses and you know, you start to see those little things Appearing now where you can't see certain contrasts, you know, can't see certain colors or font sizes and things like that And yeah, I think it's covering all of those sorts of things as well Which people don't really consider sometimes

and it's a sliding scale and most of these things get worse with age, right? Mm hmm Memory, being able to remember things, like if a user interface forces you to remember complex information, then the older the person using that, the more difficult it's just going to be for them to complete whatever activity they need to

complete. You mentioned, I think, that certain areas are now regulated, you know, there's certain industries and certain site types and certain areas where there's actual legal governance frameworks covering some of these bits. How are those sort of organizations stepping in? Is there actual legal requirements for organizations to be accessible generally, or is it more? More of a sort of best practices guidelines. What's the situation there?

Yes, it's both. So there are organizations that are clearly under legal regulation. Some of the more clear cut ones are the airline industry. So for example, any company flying to the United States is under what's called the Air Carrier Access Act, which is part of the United States law. And that requires accessibility for everything, including boarding procedures. And so it covers the physical stuff, as well as the online stuff. And so the FAA is responsible for enforcing that, and enforces it to different degrees. If there are complaints from people with disabilities, then that can result in fines. So that's one example that's very clearly regulated, with very clear enforcement. And then, on the other side of that, just taking North America into account, is the Americans. with Disabilities Act, which also covers physical and online experiences. And there, the enforcement is not an organization. In fact, it was written into the law that It was expected that individuals who were, were disadvantaged would actually go to court as that's the explicit enforcement mechanism. So there is very much the legal system that is enforcing it or the people going to the legal system to do that. In coming over to Europe, there's the EU directive on accessibility which currently covers all public entities where every government has to report back to the EU on their accessibility and then they have to take action. And they have to enforce an improvement within their own countries, and there is an activity underway within the EU to expand that, to do the equivalent thing for all private entities. And then each individual country, even within the EU, there are countries that have laws. In the UK it's much more advanced, or in Norway, for example, pretty advanced with enforcement. So the legal landscape differs across the world. But the one thing that is, I think... The same everywhere is that it's increasing all the time. And if you went back 25 years ago, 30 years ago, there was very little legal frameworks at all. And today there are a lot in a lot of different countries and it's just increasing.

Yeah, so there's all sorts of consequences effectively for not having an accessible website. I mean, there are legal consequences in there. But as you mentioned earlier, I think the biggest consequences is the fact that there's a vast majority of your audience that just won't be able to interact with content if your site's not accessible. No, it's really key. Yeah. So as a business owner, I think you've pretty much convinced me now that I need to make sure that my website and content and things are accessible in there. How then somebody that's looking after or running my website, should I go about making sure that my site is accessible? You know, what would be the first step I'd need to do? Yeah, well,

it depends whether you're you're starting over or doing a redesign is a different approach you take to that. And that's definitely the ideal. The ideal situation is to include accessibility thinking into your design process right from the beginning. Because certain things are, while possible, to make what we call technically accessible, if you're retrofitting, then your experience is probably going to be Not very good. It'll at least be usable, but it might not be very good. And so including accessibility thinking during a design process, whether that is just through heuristic thinking, whether it's through including people with disabilities into your personas, or into your testing and research, most of the time it results in a design that's easier to use for everybody. But that's definitely the ideal approach. And then once you've done it in your design, there are tools and approaches you can take throughout the development process and the content delivery process to make sure that that design intent is in fact carried through. Implemented and then that as you add content through your content management system that doesn't break accessibility once the website itself is deployed. Yep. Uh, so that's ideal, but you know, not everybody can start this. Absolutely not. Yeah, yeah. A good way, you know, a good way to start is to take some of the free tools that are out there. I mentioned Axe Core. Yep. As the open source project that I started. That's embedded into a lot of tools that are free including. Our X DevTools Chrome extension. So if you search for X Chrome, it'll come up as the number one result and you can just install that. And that's a great tool because it can be used by developers, QA people, designers, or marketing people to test content, whether that's the content that they're writing right now. So you write your content, you put it through the preview. Or you put it into your QA environment first and then you can just click a button and it'll test it and it'll find 57 percent of the issues and it'll tell you how to fix them right then and there. So that's the really clearly the lowest barrier of how you can get a huge amount of common errors fixed with very little effort. And so I would certainly suggest that everybody start there. And then there's a lot more that you can do after that as well. So just using

a simple Chrome plugin can give you a very quick overview of basically how your website's performing and the major problems that you've got that we can address quickly there. So, talking about that, what are the typical things that people tend to start to see straight away? What are some of the essential elements that people need to consider that that tool would often pull out in there?

There's three, basically three concepts to accessibility. Perceivable, and what that means is information that's being presented, perceivable by people with all sorts of abilities. So, simple examples of that are, if I've got an image, is that image described in text so that somebody who can't see the image can have their text either read out to them with a screen reader or if they're blind and deaf, can have it output to a braille device so that they can actually read that with their fingers, right? So that's a very simple example of can I perceive that information that is in image form if I cannot see the image. Similar things are with the state of your user interface objects. Like if you have a user interface element that's disabled or an input field that is required to make sure that that state information is conveyed through textual means as well as through visual means. So to all the different senses. So that's perceivable, right? The second big grouping of things is what we call operable. So there's a button to submit a form, for example. Can I actually click that button? Now that may seem obvious, but if you can't use a mouse and you can't use a pointer device and you have to use either a keyboard or a keyboard equivalent device, does that button still operate with that? And when you get to more complex types of widgets such as menus, tabs, etc., perhaps there are some custom widgets. You might have a map with a panning capability. Can I use a keyboard equivalence and that sort of thing to operate all the controls to get to the functionality I need to. So that's the second big category of things. And then the third category of things is understandable. Okay. So, can I understand the jargon that's being used? Can I understand if there's an error that's being presented to me? Can I understand... How to resolve the error and how difficult is it for me to do that and what level of cognitive ability do I need to complete that. So those are the big three categories of things that are going to be presented. It's like

perceivable, operable, understandable. Yeah,

the last one is robust. But robust is really kind of a technical concern. It really has to do with have I implemented something in a way that is future compatible with browsers. So is it standards compliant, right? So it's not really an accessibility concern. But it's more of a technical implementation concern. So in Web Content Accessibility Guidelines, we talk about POUR. P O U R. Perceivable, Operable, Understandable and Robust.

Yeah. So, other than the sort of the technical implementations now and the reasons for accessibility that we've discussed around sort of disability, is there any other... Business reasons or technical reasons that I might want to go about implementing this outside of its core purpose. What other impacts might it have on my business or the way that people can interact with my site generally? Well, I

talked about the fact that if you include accessibility thinking in your design process, you end up with a more usable site for everybody. This is what we call the curb cut effect. And that refers to the Americans with Disabilities Act, which mandated that all buildings be accessible to people with wheelchairs or equivalent devices. And what that ended up resulting in is that you get in all over the world now, but starting in America, your curves, which are graded down to the street level. So now you can use things like the scooters and skateboards and parents with prams can push those easily across the road. And all of that is a side effect, essentially of making it accessible to people with wheelchairs. That's the curb cut effect. And a similar thing happens in online because sometimes designers and developers are lazy and they'll say, for example, when MapQuest first came out, everybody just put maps on their website, right? Because why? Because now you can, right? It's cool. And they didn't really think about, well, why am I putting the map there? And a map is a very difficult thing to make 100 percent accessible for all the different uses of a map. If you think about the information density of a map, that's huge. But if you think about the reason that you're putting the map there, then you can make that accessible. So for example, if the map is there for directions, then you can provide textual turn by turn directions that are very easy to make accessible, right? And actually those turn by turn directions are more useful sometimes to even people who can use the map. And a good example of this is when Ottawa... was voting on increasing the border of the city. Their first reaction was to put a map up on the website, but then they were like, oh, how do we make that accessible? And trying to describe the boundary of the new city related to the boundary of the old city was really complicated. So they went back and did some user discovery and said, okay, users, you know, citizens of Ottawa, what questions do you want answered? And most of the time it came down to, I just want to know, given an address, maybe it's my business, maybe it's my home, my farm, whatever. I want to know whether it's inside or outside the new border. And so they created a basic search interface, which ended up being much more usable for everyone, right? So if you really include the design thing and think about use cases, what are we trying to achieve? Which often accessibility is the lens. We call about accessibility being a usability lens. It forces you to focus. on what you're really trying to do and that ends up making the application and the experience better for everyone. I really

like that example inside there and we often talk about what's the problem that you're trying to solve here, you know, what's the problem that your end users have really got and it makes you think about that in a different way if you think about accessibility in, uh, not necessarily just drawing a border around a town, but yeah, I want to know whether I'm inside or outside. the real problem that people are trying to solve with that visual. Yeah, perfect. Is there anything else that you think that would be of interest to the people listening today, um, that we haven't talked about so far?

Um, yeah, I think that one important thing to say is I talked about the tools and the automated tools that are based around axe core. There is a little bit of a misconception out there that if you've got a lighthouse score of a hundred percent for accessibility, now you're accessible. That isn't the case, so I would impress upon people just to understand that it is more than that. The other thing, we've talked a lot about websites and that sort of thing, but as developers or QA people, there are tools and techniques and processes. That's what I wrote my book about, and in fact you can get a free download of an accessible e book if Deque. com. Just search for the Agile Accessibility Handbook and you'll get to a page where you can register for a free book. And that talks about a lot of the practices that you can use to embed accessibility into your Agile development process that make it sustainable. And so I just urge people who are maybe not just developing websites, but maybe more complex web applications. to sort of investigate that aspect and how to make it sustainable for your dev teams and your QA teams as well.

Cool. Dylan, I think that's been great to have you with us today. I've learned a lot from this in any case. And I'm sure people listening will pick up some great things that they can take away and include in their own websites. So thank you very much for joining us. Yeah, it's

been great to talk to you. Thank you very much for inviting

me. Thanks Dylan for the time today. It was really great to catch up again. You know, accessibility has always been one of those things that I've just put onto the back burner and plan to get around to someday. But I definitely think that after today's conversation with Dylan, my eyes have been opened in there and it's really given me a few simple things that I can work on with our website too. A couple of key things I picked up, I think, first of all, was Dylan's comment about including accessibility within a design process. You know, I think that's really key. It's so much easier and cheaper as with everything to get things right from the beginning. So a couple of simple things that you can act upon straight away are going to be stuff like font sizes. Colors and size and types of your controls that you use in your page. You know, they're the things immediately that I noticed being slightly less cited than I was a few years back. The other thing to consider is don't forget clarity always wins over fancy interactions. So, as Dylan mentioned, review your site and check out what it can do. He mentioned a free browser plugin called Axe Tools and I'd recommend that you go and take a look at that. It's going to highlight some of the most glaring accessibility issues that you've got on your pages and you know, you don't have to fix every single one of them but clearing up the most frequent and the biggest issues We'll definitely show that you care about your whole audience. If you're having problems setting up and optimizing your website, then as always, you can hire an authentic engagement coach. Just go to wantauthentic. com to hire a coach that will show you how to increase the effectiveness of your website and give you an easier way to grow your business. So before we go. I'd like to give you something to do to improve your website and drive business through your sales pipeline. Today's reasonably simple actionable step is going to take you only a few minutes, but it's really important. I want you to conduct a mini accessibility audit. So, Dylan suggested Axe Tools, and that's available on the Chrome Extensions Marketplace. There's also other free website accessibility checkers out there if you prefer to use those. But what I want you to do is to go to that marketplace and install one of those tools on your browser. Once you've installed that... Go to your website homepage or a product page, you know, some of the main pages on your site and run the audit. The tools are going to verify all the main page and navigational elements within the page, including things like your text, your images and buttons. And they're going to check that those are properly accessible and can be understood and used by the various assistive technologies that are out there. When you've got a good idea of how accessible your website is, the next thing I want you to go and do is to fix up some of those biggies. You know, you don't need to fix up everything, as I mentioned a minute ago. But just fix up the things that are going to make the biggest difference. If you forgot to put alt tags on your images, go through and do that. If your buttons are too small, go fix up some of those things. If your colors don't have good contrasts, you know, they're quick and simple changes that can make some massive differences. You can try making changes yourself. Or if you've got problems, just ask a web developer to go over your site and improve the accessibility for you. There's many companies that will help with that. So it might not be as simple as some of my action plans coming back to think about it. But even minor changes mean that your website's going to be more accessible to a wider range of customers. So that's all for today's episode of the Authentic Marketing Podcast. Thanks as always for listening and don't forget to bookmark the podcast and to follow us on LinkedIn. We love to hear what you want to know and how we're helping your business to succeed. See you next time.