Digital accessibility – 8 areas to look out for

At one point or the other. Every single one of us meets some kind of disability with digital products because disability is not a personal health condition, but a mismatched interaction point. And we need to talk about this way more often.

So welcome to the Green the Web Podcast. It's a podcast about ecologically and socially sustainable design. Usually I talk more about the ecological realm of sustainable design of green UX, UI design and stuff like that, but today it's going to be about accessibility. I'm your host, Sandy Dähnert, a freelance UX, UI designer and researcher based in Cologne in Germany and the mind behind Green the Web.

So in this podcast episode, we will dive deeper into what is digital accessibility, why should we even care about it? And eight areas to look out for because we often only talk about one or maybe two, which are like the most common and popular ones. But we should talk about the other areas of digital accessibility as well. And in the end, I will also give you some tools to find out even more about the accessibility state of your digital products that you're designing. So first, why should we even care about digital accessibility? I would say there are two different parts of it. The first part is the social reason. The second part is the business reason. We always need a business reason. So first let's have a look into the social reason, because we need to enable everybody to live their healthiest life possible and to create experiences for people of all abilities to be actually inclusive in what we do, and we will get to what our disabilities you might encounter, that we all have some disabilities at one point or the other with digital products. It's the business reason is you can actually increase user growth and engagement with more accessible design. You can increase brand love because it's just way more usable and user friendly. You can increase sales with accessible design because it's more accessible. You will meet legal requirements and protect the business from future fails. You can reduce brand risk, for example, from bad press and you will be innovative with the accessible design you're doing. And especially the legal requirements have changed in Europe. And from 2025, most of the businesses, not just the public sector, but actually all businesses need to have accessible designs and accessible digital products. There is only a few small areas that don't need to do it as much yet, which is for example, very, very small businesses and online shops. But everyone else has to do it from 2025, in the EU, in the European Union, have accessible digital products at least some kind of standard that is published in the European Accessibility Act. So let's have a look into what our disabilities. As I said in the beginning of this podcast episode, disability is not a personal health condition. We often talk about it like that, but it is not. It is a mismatched interaction point. It's some situation that you have as a person and a digital product that is not working in the situation or in the way you can interact with it at this very special time and point. The most important fact is to understand that disabilities are spread between permanent, temporary and situational impairments. It's not just caring about fully blind people, for example. It's about so many more that range from an intense impairment to being just distracted. There is a by now quite well known Microsoft Accessibility Toolkit. I will link it in the description because it's super helpful. It did definitely open my eyes heavily and drastically, as I know many others have found it the same way that you have permanent impairments, temporary disabilities and situational disabilities. Permanent impairments for example, being blind, being deaf, non-verbal, lost an arm to an accident, things that are there permanently, and even that being blind has a huge range from being fully 100% blind to still having a couple of percent of being able to see some kinds of shades or shapes. So even there, there is so many different areas to look into. What does actually mean blind, deaf, nonverbal things like that. Temporary disabilities means you have a broken arm for a couple of weeks. You have cataract, you have an ear infection, or you have the flu, which temporarily means you cannot use your devices in the way you've used them before. You are distracted when you're sick. Do you actually have the same brain space as you have when you're fit and healthy? And then there is situational disabilities. For example, carrying a baby, being actually distracted while driving a car while speaking to another person. You might be sitting in public transportation without headphones. You might have strong sunlight shine on your screen, or you're surrounded by a loud noises in a bar, in a school, on a kid's playground, in some kind of party or social gathering, stuff like that. Those are situational disabilities. And in those situations, you also have disabilities, and a mismatched interaction point can occur. For example, sitting in public transportation without headphones, but you don't have subtitles to the videos you are watching. So in some cases, services become invaluable or actually unusable. In other cases, mental abilities are strongly limited and therefore web products are harder to use, including a reduction of concentration, attention span, reading abilities, patience, quick thought processes, all of those things. We all have encountered them in one way or another, and Contentsquare and other sources actually state that 70% of digital content is not accessible to people with disabilities, and that is huge. We need to change that. So let's have a look into the eight areas to look out for. We will talk about the most popular one which is colors, the second one being typography, the third one being writing. Fourth one video. Fifth one. Audio. Sixth one forms seventh animations and final eighth being navigation. So let's start with the popular one. We always talk about colors, but even there we only talk about one specific thing, which mostly is color contrast. But let's first talk about color disabilities because color plays an extremely important role in accessible design. So there is for example, color blindness, limited eyesight, and situational limited sight. Those are three factors that I often refer to when it comes to color disabilities. Color blindness means a decreased ability to see color, or a decreased ability to tell colors apart from one another. Worldwide. 1 in 12 people is colorblind especially. There is a huge part of that being red green blindness, which mostly men have. Fun fact um, so you cannot tell apart red from green as easily. We need to know that when we design like just lately in the green UX UI design course, one of the members shared her designs for public transportation lines that had. I'm not even sure anymore 16, 17, 18, 19, 20 different kinds of lines with different colors. And of course, some are then a little closer to each other than others. And you need to make sure that people with color blindness, whether that's red green blindness, there's a couple of others out there as well, can actually tell them apart. So that is color blindness. Limited eyesight means a decreased ability to see content clearly, which can also be there due to an eye infection. Conjunctivitis. Getting older with macular degeneration with cataract. Many different reasons to have limited eyesight, everything might get blurry and therefore low contrast lead to reduced readability. So if you have a really light grey as text color, people with limited eyesight might have huge struggles in reading those texts. Even people who don't have limited eyesight. There's so much bad color contrast out there that even I, with quite good color abilities and eyesight, have struggles because designers feel like, oh, this is artsy and fun and beautiful, but no one can actually read it. And then there are situational, limited sites such as Strong Sunlight Shine on the screen. So it is a decreased ability to see the content on a screen due to sunlight. This occurs only temporarily and has nothing to do with the person's ability to see colors or to have good eyesight in general, it's important to think about those situations as well, especially when it's summer, for example. So when we talk about color accessibility, yes, we do talk about text color contrasts. It's also about your illustrations, your imagery, your your other kinds of color contrasts that you have apart from text. But text is the most important one. And then graphic elements and things like that, especially when it comes to graphic elements or visual elements that are there to help to explain a process. For example, it's also about error messages to be able to say, this is a success message. This is an error message, especially when we talk about red green blindness to bring in some icons. For example, to say this is an information, this is an error, this is success to not just rely on color. This also goes into color coding, not just relying on color, because some people might not be able to tell them apart. Have some kind of pattern, icons, visual, other forms that say this is a different topic than the other. It's about link and button states where there are so many different buttons and contractions out there that are really hard to read. It's about forms and labels where you can actually see what is the active state of a form. For example, it's about product color selections in online shops where you have actually the color visible, but also a word to it, not just dark brown and dark grey. And some people were like, well, which is which, but actually tell what this color is, for example, dark brown and dark grey. So it's not just about color contrasts, but so many other things where we need to make sure that people understand it not just based on color, but with additional elements and features, as well as are able to actually read and detect what is behind what is said. The second area to look out for is typography. And there we especially talk about readability. Some fonts are easier to read, some are harder. The best to spot. An accessible font is when you put capital letter I and small letter L next to each other, because then you see that most fonts have those as the same shape or pretty much the same shape. It does not automatically make it an inaccessible font, but for example, that if that is distinct, like different from each other, then this is a lot more accessible because then people can tell apart whether that is a capital letter I or a small letter L. There is also text sizing and spacing. When we are talking about typography, it's about letter spacing. It's about text and images. For example, text should be never integrated as image because you cannot zoom. It just then gets blurry and you should avoid text placed over images. It's almost always hard to read, and when. Then the window frame is changed from a desktop frame to a smartphone frame for example. Then text is moving, images are moving, and then suddenly everything just gets weird and blurry. So things like that really think about how to put text and images together. And then there is also text style and structure. For example, avoid full caps like fully full caps. All sentences or even just words in full caps is hard to read for many people to avoid. Right paragraph alignment super hard to read. Avoid justified paragraph alignment. Avoid text width that is longer than about 700 pixels width, because then it's hard to read the whole text line. It's too long for our human eye to keep this line. The best is actually between 50 and 90 characters, which is about like three fourths of a page in desktop view, not full width of a desktop view page. Because it's super hard to read. So that is in. The area of typography really have a look into is all that I'm writing easy to read for every one, or is it just artsy? And I thought, well, I just do something differently, especially with those handwriting calligraphy fonts that might seem fun and beautiful, but if people can't read it well, you could just leave it out and just not do it at all. Then the third area is writing. Make sure that all users can read and understand what you write, including users with different mental and physical abilities. It includes the language that you use, the structure of the text, and the way you organize and present content. Make sure that you don't have just a huge block of text and think like, yeah, yeah, it will be fine. People have to go through that. No, make it fun, make it exciting. Implement headlines in between different sections. Enable people to read through things, but also to have visual elements that might explain certain areas or certain processes. For example. Very important to have that, but also in a process, for example, not just having an image of it but also explaining it. So going the one way and the other way around as well. And in writing we also have the area of alt text and writing for screen readers. So really ensuring that people with screen readers have the ability to browse through your website, your online shop, your application where we need alt text that we need to set up in the back end. You might have heard of alt text when we talk about SEO. So search engine optimization, because it's also amazing for search engines to understand what content you have on your website, ensure that it's easy to read. For screen readers and search engines. So people who use that can actually visit and navigate through your design. The fourth area is video, so hearing and seeing play the two major parts in video accessibility. There is limited hearing abilities, limited eyesight, limited reading abilities and deafness blindness, limited language abilities. Those are like the main factors. Limited hearing abilities means you have a decreased ability to hear. It could also be due to a flu or an ear infection, or even an increased hearing challenge, such as teenagers. So listening to audio is very difficult and might even cause fatigue or similar symptoms. You have limited eyesight when it comes to video, which means it could be due to an eye infection, conjunctivitis, getting older, things like that. Again, your video might be blurry to those people, or it might be a reduced readability if you have text in your video. Then there is limited reading abilities. For example, people with dyslexia. And there's actually 1 in 10 people worldwide who show signs of dyslexia, which is quite a lot. And then text is very hard to be read, especially if you have your text in your video and don't explain anything around it. There is full deafness or blindness, which makes it harder to watch or listen to a video. There is limited language abilities, so you need subtitles to help with understanding the language. And. There is a lot of watching videos without audio, especially if you're in public transportation, for example, or in public sectors and social gatherings. A lot of people watch videos without audio on the road, with friends, in public places, or as they simply prefer to watch videos without sound. It occurs only temporarily and has nothing to do with the person's ability to hear in general. But according to Contentsquare. Videos with captions generate an on average a 12% increase in viewers. So care for your subtitles. This is actually the major thing in videos, and sure that there is smooth transitions so you don't trigger anything that we will talk about in a second with animations that you have subtitles, that those videos are short and precise and clear to people, and that you don't just have the video as an explanation, but also some kind of text description down below so people can actually read it if they want to and don't have time or bandwidth or audio to actually listen to the video in that moment. Now let's get to audio. As the fifth area of digital accessibility I want to talk about. So there we have limited hearing ability actual deafness or being nonverbal. And also again listening to audio without video or visuals. Limited hearing ability could again be due to a flu ear infection or again something like tinnitus. So listening to audio might be difficult and really triggering and hard and frustrating. Think about those situations. It might be that this person is deaf or nonverbal, so it's challenging if this company only provides a telephone hotline and this person can just not say what he or she wants, or has a question or has feedback, if there's no ability to actually send an email somewhere and then listening to audio without video and visuals, because a lot of people listen to audio without having any other visual while doing other activities, for example, while scrolling through the rest of the page or while falling asleep doing dishes, cooking things like that. Again, it occurs only temporarily. It's nothing to do with the person's ability to see in general. So don't just rely on people who will watch a video or have a look on a visual will have the full experience. But explain everything correctly in your audio so people can actually just listen to it while having the experience of your digital product. The last three number six is forms. There are so many poorly implemented form fields, uh, that I can see out there. It makes me really frustrated. And that can make inputting user information really difficult. Users can be unsure what information is being asked for and in what format the information is accepted, especially for users aided by assistive technologies. Again, people might have limited eyesight, are blind or have cognitive impairments and neurodivergent. A decreased ability to concentrate or understand forms, especially when they are long and complex ADHD, autism, dyslexia, things like that, as well as having the flu or a migraine, can result in similar effects. Imagine having a migraine and trying to shop something in an online pharmacy. It could be really horrible and frustrating. This means informs, for example, that you should have your labels, your form, labels outside of the form field and really close by. So people have some feeling of those are the form fields that are actually asked for can actually read it. There's not too much animation and fancy interactions within them that it needs to be an easy to understand process, that instructions and error messages are located close by to the respective form fields. There is so many things we can do a lot better in form accessibility that guides our users a lot better, especially when they have a hard time doing it at that moment. Forms are somewhat of the biggest areas we look out for in conversion optimization, but we need to really implement accessibility in there to care for all people who visit our online shops and applications. Two last parts of digital accessibility I want to talk about seventh is animations because, for example, fast and flashing animation effects can result in seizures, episodes, nervousness, stress, frustrations, anxiety, and in the long run, mistakes as well as bounces. Therefore, calm design can only be highly recommended. I really, really do highly recommend thinking about calm design and how it affects people. There might be cognitive impairments in neurodivergent like epilepsy, Tourette's, autism, other cognitive challenges that can be highly triggered by animations. It's similarly triggering when having the flu or migraine, as well as being in a stressful situation like your baby has been crying for four straight hours, you are not the same as without this situation. Some users are photosensitive. That is particularly vulnerable to certain strobing or flashing effects, and prone to seizures if exposed to this type of content. So keep it calm. Use micro animations instead of extensive content animations. Build in pause and play functionalities for automatic animations. For example, in a slider that's not just going through automatically, but have a pause function built in. Even as a general site feature having on and off switch for animations. Amazing. Avoid automatic pop up overlays for newsletters, push notifications, campaigns, all those things, especially when done at the same time. It can be extremely frustrating and causing hard bounces. You might have done that as a user before as well, and I even lately I got sent from a friend of mine a website. I have to see if I still find the URL that has a disclaimer on the front page of if you visit this website. This is super flashy neon colors going through this. Like don't do it if you have somewhat of cognitive impairments, neurodivergent or any kind of triggering challenges. And then you click on okay, visit the website and it just goes it blasts off everything it has in terms of animations and colors and interactions. It's just wow, so bad. Even if I don't have any of those struggles and challenges, it does trigger me. Especially when you're then in a stressful situation. It's like, oh my God, the monkey mind is coming out. It's like, wow, this is I'm on some kind of drugs or something. So keep it calm. Just keep it calm and then last but not least, navigation the eighth area to look out for in digital accessibility that I want to talk about. So think about keyboard navigation, logical behavior and landmarks and focus orders. This is a more technical area. First of all keyboard navigation. Ensure that all interactive elements can be reached using the Tab and arrow keys. There are no interactive elements that trap input, focus and prevent navigating away. One of the trickiest things because I see so many websites doing it wrong, and then you're trapped, even just in the header area in the search field. No one can actually visit the main content area when they're using the keyboard navigation. Success! This could be easily done differently then logical behavior ensured that the tab order is consistent with the logical order that's communicated visually. Input focus does not move unexpectedly without the user initiating it. You know those websites that when you load it, you have like the first frame visible already, and you have a button or something that you have to click, and then suddenly ads, for example, come in on top of the page and everything is shifting down below, and you click something wrong, like the ad, for example, and some spam. Those kind of things happen quite frequently. This is also when it comes to input, focus and input fields, stuff like that. And also, yeah, just being consistent with the logical and tab order that you're communicating. And then last but not least in this area is landmarks and focus orders. Define landmarks in your design. Landmarks are sections of a page that can be skipped like you have the landmark header navigation search, main content footer. So it's actually just addressed in your code. And then people with assistive technology can just jump to, for example, the main content. And especially when it comes to online shops and they come to the third page and have to go through all of the header navigation and search again, they will definitely bounce and go to somewhere else. Defined focus orders at page level, at content level, and also at component level, and also define the default focused element for when a page opens. Really important of where does a user start and where should one go next? That is navigation. So we had colors, typography, writing, video, audio forms, animations and navigation and a couple of tools that are really, really helpful to discover at least some of those accessibility issues that are for browser desktop Figma, Adobe XD sketch. There's like different kinds that you can look around. I will have them linked in the description. Some of my favorites are Stark Silk Tide ax Addy. Really fun is cards for humanity. Definitely check this one out because it gives a new view into accessibility. It's a little game and accessibility personas. There's a couple of them out there, for example by Alicia Crowther. Really interesting. I feel like there's much more coming up in the next months and years of people who are will be talking more about accessibility personas and how we can implement them into our target groups and not forget about the different kinds of people who not might be super fit in physical, cognitive, or other kinds of senses, as well as talking about permanent, temporary and situational disabilities that we all face at one point or the other. So definitely check them out.

If you have some additional tools or additional areas to look out for in digital accessibility, please let me know as a comment in the post, on LinkedIn or Instagram at Green the Web. And then subscribe to the podcast. I am super happy to share more of that stuff with you. As I said, it's mostly usually about ecological sustainable UX/UI design. Sometimes I bring in some socially sustainability in here as well. Rate the podcast. If you enjoy this show, share it with your colleagues with your friends and visit me on youtube.com to see all kinds of different free resources on my blog, my free resource list, the Lightweight Design Best Practice library, or even if you want to go deeper into green UX UI design, my green UX UI design course that's there as a self-study as well as live cohort option. I'm just happy to have you in my community and hear more about you. I'm just so grateful that you're here and are changing the design industry with all of us, one step at a time, and then see you in the next episode.