Thinking Differently About a11y – Accessible Website Design for the Neurospicy

I hope you're still awake as well. It's been a long day, but yes, I'm Stephanie Shaw. I'm a senior front-end engineer at Beamery, and I have ADHD, and I'm here to talk today about how accessibility relates to people like me. So, what is accessibility? Well, I asked my colleague over at Beamery, and she reckons accessibility is all about screen readers, and aria roles, and semantic HTML, and all that jazz. Maybe you think the same. My goal is to use the next 20 minutes to perhaps change your minds, and have you thinking about accessibility a little bit differently.

So, let's meet three personas, Amina, Ben, and Caryl. Amina's been visually impaired from birth. She uses a screen reader and the keyboard navigation and special gestures on her mobile phone to help her navigate around the web. Ben was in a car accident as a teenager and suffered from physical injuries which he's recovered from but he still has a traumatic brain injury which means he has some cognitive impairments. He has trouble with his working memory, and with reading comprehension. Caryl has always felt a bit different ever since she was a child but she wasn't diagnosed as autistic until her late twenties and that's a depressingly common scenario for many neurodivergent people especially women and people of colour.

Now when we think about web accessibility we are often thinking about users like Amena in many jurisdictions, including in the US with the Americans with Disability Act and in the UK with the Equality Act 2010, public websites are required to adhere to the WCAG AA accessibility standard as a minimum. There have been several high profile cases where users with accessibility needs such as Amena's have been able to successfully sue organisations for failing to meet that standard such as this famous case with Beyonce's website a few years ago. And as front-end engineers, because the AA standards are the ones that we are legally required to implement, those are the ones that we are most familiar with. But honestly at some places that I've worked it can be a challenge just to get people to do literally the legal minimum. And even if we are doing the bare minimum, often product managers, UX designers and front-end engineers are focusing on how we can create beautiful experiences for fully abled users without necessarily considering how to make the experience beautiful or create moments of delight for users who have additional accessibility needs.

Now, Ben, he has fully recovered from his physical injuries following from his car accident but his traumatic brain injury means he has cognitive impairments that can make it difficult to use websites, things such as memorising passwords or navigating around complex multistage processes on the web. While some of these impairments are covered by the AA standards, the AAA standards from WCAG offer a much better level of coverage for his needs. However, the problem is that the AAA standards aren't legally required there opt-in. And as a result, it means that the adoption of the AAA standards across the web is variable, to say the least. And it's not necessarily because we as front-end engineers don't care about people like Ben. I mean, often, we might not even know that people like Ben exist. The main problem, though, is that the AAA standards, some of them are mutually exclusive. That means that it's actually physically impossible to implement all of the AAA standards, because some of them will conflict with each other. What you're supposed to do with the AAA standards is to get a good understanding of your users. If you're expecting a bunch of users to visit your website that have a particular set of accessibility needs, for example, if you're the National Autistic Society, then you would cater your websites for people like that. But generally speaking, it doesn't necessarily make much sense from a cost benefit perspective AAA standards across the board, and since we don't need to implement them legally, then we often, as engineers, have a poor understanding of what they actually are.

Now what about someone like Carol? She doesn't actually consider herself disabled. Her brain has always worked the same way since she was a child, so she doesn't know any better. She has some cognitive impairment, sure, but she prefers to think of herself as neurodivergent or neurospicy if you're silly and chronically in line like me. The neurodiversity movement really aims to change the perception of conditions like ADHD, autism, dyslexia, dyscalculia and dyspraxia. So we're not looking at them as an impediment or a disability, but simply as having a brain that works a little bit differently to the norm, with their own strengths and weaknesses. So neurodivergent as a definition, it's a person who has a brain that functions in a different way to the majority of the population. It's not a medical term. That's why we use words like neurospicy to make it clear that we don't consider ourselves to be disabled, we consider ourselves to be a little bit different.

According to the UK Office of National Statistics, around 15% or one in seven people is neurodivergent, and that's a significant portion of the population. But furthermore, like the neurodivergent population tends to skew a lot younger than people with physical or cognitive disabilities, and that's because people who are neurodivergent, they've always been neurodivergent since they were born, and there's no cure for neurodivergency, but people often will acquire physical or cognitive impairments as they age naturally or through accidents such as Ben, and hopefully in some cases they'll also recover from their impairments as well.

A recent study suggests that a whopping 38% of young people aged between the age of 16 and 24 self-identify as neurodivergent. However, similar to Ben, the current legislation doesn't require organizations to make any adjustments whatsoever to accommodate neurodivergent people, so that's 38% of the population potentially having barriers when using the web. And what barriers are we talking about here? Some of them would be things like working memory, language processing, sensory overload, communication skills, organization skills, or spatial awareness. But that's just the list, it's much more interesting to go through a few examples.

So here's one that I personally hate. I go onto a website, I'm immediately greeted by dozens of popups, right? It's got this GDPR permissions and stuff. Oh, do you want to have notifications from Daily Mail? No, do you want to, I don't know, sign up for our newsletter? The chat box pops up in the corner and says, oh, do you need any help? Maybe there's auto-playing video that appears. For someone who is neurodivergent, it can all be a bit overwhelming. And obviously, like, people have a business to run, but is it really necessary to bombard people as soon as they visit the page? Obviously, this is super annoying for neurotypical people as well. But for someone with autism, this level of sensory overload could very easily lead to a meltdown or shutdown, which is going to completely ruin your day, and then you've lost a customer for life. Not that I was ever a customer of the Daily Mail, as you know.

Now, another issue that neurodivergent people often face is with executive function. So, me, I love going on holiday, I've just come back from a holiday. And when you think about how many steps are involved in booking a holiday, you can sort of see how it might be difficult for neurodivergent people. First of all, you have to arrange all of the dates and the times and the locations for your flights and hotels, and make sure they all nicely match up with each other. If you have issues with organisation or working memory, it can be difficult to plan out this timeline of when you're supposed to actually land, especially if you've got a red eye flight that arrives on a different day, across different time zones with when you're supposed to arrive at the hotel. When you're booking a hotel or a flight and you're often presented with hundreds of options and you have to choose the best option for you based on the criteria, that's important for you, such as cost versus convenience. And that's not necessarily the options that the website wants you to choose, they want you to choose the people who are paying them lots of money for promotion. And you have to fill in all these forms of important data. If you're booking with Ryanair, for example, if you make a mistake on your passport number or in your name, then there could be a financial penalty involved in correcting that mistake and that makes it extra stressful, especially for people with dyspraxia or dyslexia. Suddenly the stakes are very high. You have to make sure that you're doing it right. So Ryanair will be checking this information three or four times. It's quite stressful. And then it's like, you've booked a holiday, you're keeping track of all of the various bookings, possibly across multiple websites. When do I have to turn up at the airport? Is my flight delayed? Is it canceled? Is my hotel all good? You kind of get there. It's like, I want to go on holiday to relax and now I kind of just feel like maybe I'll just be better off like staying at home, in bed, possibly crying. Another issue that often non-regular people face is with working memory that's especially applicable to people with autism, ADHD and dyspraxia.

Often, I think everyone's been in this situation where you've come to a website, you fill in your password, it says, oh, that's not the right password. You're like, oh, try again. Oh, fine. I give up. I click the forgot your password button, put in one of my usual verity passwords that I know I'm not going to forget. And then it's like, oh, you can't use that password. You've already used that password. What am I supposed to do now? I can't remember and keep track of all of these different passwords for every single website. You know, it's just wow. It's just like that. Another one is having to do cognitive function tests. In this case, entering the third, eighth and tenth letters of your memorable words. First of all, I have to remember what the memorable word is. But then for people who have issues with working memory, it can be really difficult to visualize the word in your head to count along the letters, especially a problem for people with dyslexia and dyscalculia. And so what you end up doing often is writing the password down, or the memorable word, counting down letters, okay, job done. But by writing down the memorable word or the password, it's an anti-pattern. I've made the entire process really insecure, and that's kind of the opposite of what the developer intended to do.

So what can we do as front-end engineers to sort of help the situation? Well, frankly, we have COGA on our side. What is COGA? COGA is the working group for cognitive accessibility at the World Wide Web Consortium, and they're working on comprehensive research-backed accessibility guidelines for people with cognitive or neurodivergent conditions. So that's people like Ben with his traumatic brain injury, and Carol, who's got autism. They have loads of really useful resources, including personas, which are based on real people who have cognitive impairments, user stories and design patterns that your product manager or UX designers can refer to in their work. And also, importantly, how to test for compliance.

Often with these cognitive impairments, it's not as simple as having automated tests, because the tests will be a lot more qualitative, such as, is this language clear and simple and easy to understand? There's no automated test that you can run for that. It has to be done by a real person.

Some of the work that COGA has done has gone into the latest version of the 2.2 WCAG accessibility guidelines. There's now included some additional criteria to help people with cognitive impairments, this one, redundant entry, which is at the lowest level of compliance A. That basically means that if you've got a multi-step process and you have to fill in some information such as your email address or your mailing address, you won't be required to fill in that information, the same information again, later on in the process. It should remember what you filled in previously and help you speed up the process. Another one will be accessible authentication, which is at the AA and AAA standard. That basically means that these cognitive function tests which are really annoying, rotate the animal so it's facing the right direction, you can no longer be forced into doing that. There has to be some alternative. The alternative, which is suggested, is having a magic link. I always remember my email, and my email doesn't change depending on what website I go. I should be able to say, for instance, log into a website, just fill in my email, click a button, it will email me a magic link. I click on the magic link, and it logs me in automatically. I don't have to remember a password or anything like that. That is helpful for all people with cognitive impairments, including people with traumatic brain injury as well.

If you have a product manager or UX designer on your team, a lot of the design choices will fall on them rather than you, but just because the design you receive contains one of these problematic behaviours, it doesn't mean you have to implement it. You can say no, just say no. Things like autoplaying audio and video, especially animations, I think parallax animations, that's the ones where, when you scroll down the page, things move around the page. Autistic people do not like that. You don't necessarily have to do that. As product teams, we should be communicating with each other and referring, developing expertise in this area. If you spot something which is bad practice or not going to be helpful for neurodevelopmental people, speak up and do something about it.

There is a way that you can offer the best of both worlds, and that's by allowing users to customise their experience, either through their OS or browser accessibility settings or through user settings in your application. That way, users can still experience the full application as envisioned by product design with one of the fancy animations, but you have the option to disable that if that's what you prefer. Additionally, if the user has existing preferences, say they prefer dark mode or reduced motion in their OS accessibility settings, we can select an appropriate colour scheme or disable auto-playing animations and notifications by using the CSS media selector, often seen as dark mode, but I think prefers reduced motion is less well-known, but it's helpful for neurodivergent people. Often, neurodivergent people prefer using known entities, especially people with autism, they won't necessarily want to go onto every website and fiddle with the settings until it's something appropriate for them. They might prefer to bring a tool that they're already familiar with, that they know how to use that will apply the settings across the board. So, commonly used extensions which will be super helpful will be things like password managers, ad or pop-up blockers, reading modes which will have text-to-speech, or which will remove distractions from the page. So it's really important that as developers, we ensure that our websites are compatible with these browser extensions and APIs. One of the other things that we should aim to include is error tolerance.

As, well, all users really, as web developers, we should be encouraging people to choose the correct option rather than picking an option which might not work. I'll give these guys a moment. Errors, yes. There we go. All right, so we can use, for example, fuzzy matching for searches or auto-completes. Imagine you're a dyslexic person and you are wanting to book a holiday to Male, which is in Mauritius. Male actually has an accent in the name. But if you search on many websites, this is trip.com, then it doesn't actually recognize Male as spelled M-A-L-E. You have to put in the accent, otherwise it won't know what you're talking about. That's extremely unhelpful. But if you consider all of the variety of place names, which I mean, my dear mom's dyslexic and she wouldn't have a chance in hell of spelling words like Croatian, Cyprus. So by offering error tolerance and fuzzy matching, you're able to make sure that they're able to search for the right thing.

Another one is making it easy for users to go back and correct a mistake. This one is my personal book there. Wait for the video to load. So I want to book a train. I book a train for the 27th of October. And then I realized as soon as I clicked the button, I forgot to book the return journey. My default behavior as a user is to click the back button or to swipe on my mobile to go back. But on many train websites, that doesn't work. It only works if you click the edit button. So in this case, it's forgotten that I put in the 27th of October and it's reverted back to today's date, which is the default setting. So I'll go in and fill in my return journey, go and search for the results. And I realized that all of the trains are for today's date and that's not what I wanted at all. If you're able to account for that scenario and make sure that you're able to handle those situations gracefully, it just saves a lot of hassle for people.

And finally, test with real users. Like I said, it's difficult to automate these kinds of tests. So it's really important to test with actual people who have neurodivergency. Fortunately, there's quite a lot of people like that in the tech community. It tends to be I think it's probably a bit higher than average.

So these people could already exist in your company. And I'm just asking for their feedback. Would be really useful. Obviously, you should ensure that all users, but especially neurodivergent people, have access to ways to provide feedback and use observability to gain insights just in case people are a bit shy.

Perhaps you're sitting there in the audience and you're thinking, well, that stuff sounds really helpful to me. Could I possibly be neurodivergent? Well, maybe you are. And maybe you're not. But a lot of the patterns that I've described would make the internet a much nicer place for all sorts of people, whether neurodivergent or neurotypical.

Let's take dyslexia as an example. Did you know that the average reading age of adults in the UK is nine years old? And that's not even considering all of the people who are non-native speakers of English. So if you look at AAA criteria, such as use simple and clear language and use whitespace efficiently, then that would help a whole range of people. Not just people who are neurodivergent. But because we don't necessarily read and understand the AAA criteria, we're possibly missing out on quite a lot of really useful ideas that would be just helpful for all sorts of people.

By offering a wider choice and customisation for people who are neurodivergent, we're able to offer that same choice to anybody who perhaps speaks a little bit differently. So if there's one thing that I want you to take away from this talk, it's this. Just as neurodiversity as a movement challenges people to stop viewing natural variation in brain function as a disability or impairment, I would challenge you to bring that approach to web accessibility as well. Accessibility shouldn't just be about delivering a minimum level of usability for disabled people, it should be about empowering all users in all of their diversity to access the web in the way that works best for them.

If you want to find out some more and learn some more about this, I would really encourage you to read through the new 2.2 guidelines from WCAG. The COGO website, as I mentioned, contains loads of really interesting resources and the gap analysis there as well also explains some of the research that has gone into their guidelines. There's some resources as well about how to make websites that are accessible for dyslexic people and for people who have ADHD.

And that's all I have time for today. So thank you so much. Thank you so much, Stephanie. Thank you. And apologies for testing your error tolerance there. That was not planned. It could have been a good meta. If there's anything that would cause a meltdown or shutdown scenario, that would probably be it. But we made it through. I think that's a cool bit out just before we got on stage.

I really hope that. Now, I think, as you could probably anticipate, a couple of the questions here are kind of specifically about sort of tools that might that might help. So I think the top one out here is like, have you seen any have you seen tools like bionic reader for neurodivergent people? This person, Erin, hey, Erin, if you're in the audience. Hey, Erin says that she'd love to see more tools and features like this in modern web applications. Um, I agree. Like I said, these tools are useful for everybody. I mean, like things like reader modes, it's not accessible in Chrome unless you specifically enable it. But if you're using say Firefox, you can go into reader mode just by clicking the icon, the reader icon in the URL. If it's enabled on that website, and that's useful for everybody. If you don't want to see things like advertisements or big pictures and stuff like that. I think, yeah, I mean, are there lots of tools for helping neurodivergent people specifically? Not that I know of. I'd love to see more out there. But there's lots of tools out there which are perhaps used by people with other disabilities. So like I said, reader mode should be in most browsers. It's not in Chrome. I think that's the perhaps the outlier. But yeah, the more we're able to introduce these extra tools for everybody, then it's helpful for neurodivergent people as well. Nice. Do you have any particular tools that you're a massive fan of? Obviously from the password segment, you can sort of guess that perhaps I am completely dependent on one password to manage that. I'm hoping that with the new 2.2 guidelines, that it would be less of a problem. I think a lot of people say someone like my mum won't necessarily know about all of the extensions that are available out there. We should be offering that sort of level of functionality by default within the applications. But like I said, it can be difficult to change settings in every single application because it will be slightly different each time. So what we really want is to have browser level support and HTML level support for this sort of functionality. Definitely. And when you brought up on password, I thought of that when you were chatting about the the numbered characters. I don't know who that was. Incredible. So the top voted one here we've got. Do you have any experience with or thoughts on existing design systems like Material Design or GovUK, which aim to handle accessibility concerns? Yeah, I used to work for the NHS and the NHS design system is based on GovUK, so I know that one quite well.

And I think what I like about it is that it's not flashy, but it gets the job done. I think often we're thinking about when we're doing products that we have to make it like so like fancy and have all of these animations and stuff. But I think what users really want and whether that's neurotypical or neurodivergent is just something that works well for the scenario.

So the NHS design system was able to handle things like covid really well in that, you know, product managers didn't have to think so much about, OK, how do I arrange this on the page? There were like tried and tested patterns that we were able to refer back to. And then you're just able to get that information available to the public as soon as possible in a life or death situation. Obviously, things that didn't go so well with NHS testing test and trace program. But, you know, a lot of a lot of what works well with the government design system we just take for granted nowadays. And now, you know, today it's considered, you know, like the gold standard of government, you know, design systems around the world. And a lot of countries are hoping to emulate the gov.uk design system, which is great. But again, it's not necessarily going to be that inspiring from like, you know, visiting a page.

And I think if you want to it depends on the scenario, right? Gov.uk understands what kind of users will be using the service, like, you know, people who rely on government services are often people who don't have good access to the Internet. Maybe they're using a public library, maybe they're elderly. I think when I was — the whole reason why I got interested in accessibility in the first place is working in the NHS. You know, you have to take that into account. You know, most of your users aren't going to be fit and healthy people. They're going to be people who have things like dementia and Alzheimer's. They're going to be people who will be using a high contrast mode. And so it's really important to know who your audience is.

There's a bit of the kind of — the question here that has four upvotes. My upvotes have been spending too much time on Reddit. Apologies. Kind of links to kind of what you're talking about here. So I thought maybe we can end on the kind of last top two that we've got. We've got — oh, wow. It's quickly changed. All right. Come on. Democracy. Let's go with the top one.

OK. Do you think companies such as Ryanair might be hesitant to adopt these practices to confuse people into buying things they don't really want? Let's get controversial. Oh, man. Well, obviously there's always going to be pushback against this. I think people kind of like — places like Ryanair, people who are going on these short break vacations are often young people. And as you saw, like 38% of young people identify as neurodivergent. So at some point it's not going to be like a choice for them. They're going to like — in order to kind of like keep up with the market, they're going to have to. But at the same time, if neurodivergent people don't know that they can — like there's other ways. If we don't have a voice with the technology industry to advocate against this, then we're not going to see the change that we want. So like I said, there's all sorts of people with neurodivergent people in the tech industry. And I think sometimes they don't realize that they have a voice. Or perhaps there's still a bit of stigma about revealing you're neurodivergent within the industry, and that needs to change, really. I think we need neurodivergent people to advocate for the change that they want to see within the tech industry as well.

Definitely. I feel like these last two questions almost feel like they overlap. There's one here that initially just had the lead. It was, is there a fundamental difference in building good and easy to use UI for neurodivergent people and non-neurodivergent people? Which I think is something that you touched on in your talk. There's one that seems to be overtaking it as we're speaking right now.

Which is are there any sites that explain the guidelines in easier language or share new updates? I guess we're looking for some actionable tips on what we can do.

It's a good point. I think if you go on the WCAG website, it can be quite intimidating because it's just lists of bullet points and stories. But I think the COGA website does a really good job in that it relates it constantly to these personas who are based on real people. And by reading the story of how they interact with it, then that's how I've been learning about it. It's a big topic, there's lots of blog articles and stuff as well out there that hopefully explain it in easy language. It's a difficult subject and if you want to write about it, please do. We need more articles and more easy to explain things. I think a lot of engineers don't even know how to use a screen reader and stuff like that. So how would they know how to do this stuff in the first place? I'd like to see more resources available because it's a bit dry at the moment. That's why I'm here to make it less dry, hopefully.

So do you think an increased focus on resources and then that will lead us to understanding the fundamental difference in building tools for neurodivergent people versus building tools that are... I don't think there should be a difference between building tools for neurodivergent people and building tools for other people. There's lots of people out there who would be really distracted by pop-ups, but not because they've got ADHD, but because that's just how their brain works. We think about autism as a spectrum and everyone falls on this spectrum. Some people will be medically diagnosed with ADHD or autism and some people won't, but they'll still relate to those experiences. There's a reason why ADHD TikTok is so popular, is because a lot of what people are going through with ADHD is very relatable to all sorts of people, whether they have it or not. So I think the focus should be on making experiences that work for everybody, neurotypical and neurodivergent people as well, because it creates a better web for everybody. Just having the choice, a real choice on how to experience web applications. Let's create a better web for everybody. That's what we're waiting for. Let's go.