Website accessibility involves making sure that your website is usable by everyone, including those with disabilities and impairments. We caught up with Volcanic’s Senior Designer and published author, Dimitris Georgakas, who shares 10 key things to consider when designing an accessible website.
The first thing to remember about accessible web design is to forget about the word accessible. It’s long, tricky to spell and even trickier to pronounce. On top of that, hearing it or including it in a conversation might add to the perception that some designers or developers might have, that accessible design is something complicated, elusive, awkward and that, for some mysterious reason, doesn’t apply to their work. If you’re thinking that’s not you, let me kindly remind you that a 2023 report from WebAim identified that about 96% of the 1,000,000 (yes, one million) websites they’ve checked had some form of issues that could have affected how the users perceive and digest their content, or even use the website in general.
See how I avoided saying that 96% of the websites tested were found not to be conforming to web accessibility guidelines, ultimately not complying with WCAG standards, at least on an AA conformance level? That’s because we are not lawyers.
To take it one step further, you can forget about all terms, acronyms and definitions that seem totally cryptic. Web professionals often seem to have the impression that a thing such as accessibility doesn’t apply to them or that it costs too much to implement whatever that “accessibility” thingy may be. Things are not as bad as they seem. And if you follow along by reading the rest of this article you will get a better idea (hopefully) as to what to do when designing, building or populating your website with content, so that your users can understand your message and do their job as easy as possible.
So, here’s what to do.
1. Think Simple.
I know. You’re trying to impress with your designs. That’s what I used to do when I was young and foolish, but then I grew older and even though I remained foolish, I try to think simpler. It’s easy for designers to go crazy but it’s essential for your users not to. Especially for the ones that might experience some kind of disability.
When it comes to making a website accessible, which will ultimately lead to better usability for all, simple, uncomplicated and uncluttered layouts can go a long way. Users with cognitive or visual impairments can benefit from easy-to-understand page compositions with a clear structure organised by headings, with no distracting images and confusing navigation; users with motor disabilities who may find it hard to navigate with a mouse or a touch screen will find it easier to use this content as well.
Keep the code clean and the website simple, predictable and consistent. Oh, and responsive. Obviously.
Related to: 1.3.1 (Info and relationships), 1.3.2 (Meaningful sequence), 1.3.4 (Orientation), 1.4.10 (Reflow), 2.4.6 (Headings and labels), 2.4.10 (Section headings), 4.1.1 (Parsing).
2. Size Matters.
No one likes to do more work that’s needed. Especially in today’s world where people are working faster and more efficiently than ever. Imagine if you have to waste precious seconds trying to reach that little checkbox or tiny button just to send a message or buy a product.
Sufficiently sized touch targets are especially important for users that might have mobility impairments, loss in fine motor movements, bigger fingers than normal, ones that use a mobile device with one, two, or no hands, or anyone that finds it hard clicking on that little dot you like to call radio button. Accessibility guidelines recommend a target size (with target being that region on a screen that is interactive) of at least 24×24 pixels, and if you want to be a superhero designer, increase that to 44×44 pixels and job’s a good ’un.
Related to: 2.5.8 (Target size-minimum) and 2.5.5 (Target size).
3. Use Colour Wisely.
The use of colour in your designs can make or break the experience of the user. How many times have you used a pale grey on top of a white background just because it looked good? Too many? I know I have; until I went to the dark side.
Colour is often used to convey meaning, but make sure you are using colours with enough contrast between them as users need to be able to distinguish different kinds of information and the ones with low vision might have difficulty seeing subtle colour differences. If you like numbers like me, a 4.5:1 contrast ratio is what you need between a font colour and its background to begin with. But don’t just rely on colour alone. Some elements, such as text links or forms, might also need an additional visual cue (e.g., an underline on hover or an icon to indicate error), to ensure all users can understand what’s going on.
Related to: 1.4.1 (Use of colour), 1.4.3 (Contrast-minimum), 1.4.6 (Contrast-enhanced), 1.4.11 (Non-text contrast).
4. Use Simple Fonts.
People might be scanning websites more than reading them, but that doesn’t mean you have to make their lives difficult and test their deciphering skills and knowledge. With about 90% of a website’s content being text, you’ll want to have accessible font displayed through-out. Avoid decorative fonts with complex characters that resemble a doctor’s prescription and use simple fonts of adequate size, as they’re easier to read.
Do that and users with cognitive disabilities (e.g., dyslexia), visual impairments or even ones with limited language proficiency will be browsing your website and praising you subconsciously at the same time for doing a good job.
While there is no guideline that requires the use of specific fonts, some related criteria may be: 1.4.5 (Images of text), 1.4.8 (Visual presentation), 1.4.9 (Images of text-no exception) and 1.4.12 (Text spacing).
5. Write in Plain Language.
“The intricate fusion of inscrutable linguistic constituents generates a convoluted and abstruse connotation, impeding the lucidity of said construct”. Did you get that? No, me neither. At least until I spent 15 minutes trying to construct something leaning towards being hard to understand just to prove a point.
According to accessibility guidelines and also common sense, when putting down content aim to be specific and to the point. Avoid complicated language and try to provide content that can be read by a 12-year-old. Basically, look at tip #1: Keep it simple, as using easy-to-understand language on websites can improve the accessibility and usability of the content for a wide range of users, regardless of their abilities or disabilities.
Related to: 3.1.5 (Reading level).
6. Use Clear Labels and Instructions.
Whether it was to send a message, search a website, buy a product or subscribe to a newsletter, I’m sure you must have used some kind of form in your online presence lifetime. Have you ever come across a situation where you were filling in a form and forgotten what you were typing and where? This is where clear labels and form instructions come in.
Avoid using placeholder text as a label and put them on top of their respective fields in a legible manner so the users know exactly what they’re doing. Denote required fields with the word “required” rather than an obscure asterisk (“*”) and for the love of everything that’s holy please don’t put “Submit” on your form buttons, as these labels are meant to be understood with or without context.
Related to: 1.3.3 (Sensory characteristics), 1.3.5 (Identify input purpose), 2.4.6 (Headings and labels), 2.5.3 (Label in name), 3.3.2 (Labels or instructions),.
7. Provide Clear Focus States.
A focus indicator highlights an interactive element (only) when it is selected by using either a keyboard or a voice command, and it pretty much is just a shape on or around the element.
Make sure you design them in for every interactive element, as the default browser styling might not be as visible depending on the website’s branding. They need to stand out with good contrast, as they benefit a lot of people: users with mobility issues that might use their keyboard to navigate, ones with visual impairments, one with no mouse and so on.
Don’t overthink it. Sometimes, a great and acceptable focus state could be just the same as a hover state. And if the heart-warming gesture of making people’s lives easier is not enough, a visible focus state is a requirement under the accessibility guidelines. So… ha!
Related to: 1.4.13 (Content on hover or focus), 2.4.3 (Focus order), 2.4.7 (Focus visible), 2.4.11 (Focus appearance-minimum), 2.4.12 (Focus appearance-enhanced), 3.2.1 (On focus), 3.2.7 (Visible controls)
8. Be Descriptive and Methodical.
When people use a website it’s for a very specific reason and a very specific job (apart from mindless scrolling). And that job needs to be done as fast and as efficiently as possible.
Weird incomprehensible lingo won’t help, so try to avoid idioms and jargons, but if you have to add them in, maybe include some explanatory graphic to make them easier to understand. All your links ideally need to be descriptive, describing their purpose, as a generic “read more” doesn’t mean anything outside of context (remember tip #6). Provide more than one way for doing the same thing and think about the poor users that might be hard of hearing, deaf or just want to view a video on mute and include captions or transcript links.
Try to think like a user and not like a designer.
Related to: 1.2.1 (Audio-only and video-only), 1.2.2 (Captions), 1.2.3 (Audio descriptions or media alternative), 1.2.4 (Captions-live), 2.4.4 (Link purpose-in context), 2.4.9 (Link purpose-link only), 3.1.4 (Abbreviations), 3.1.6 (Pronunciation),
9. Don’t Forget About ALT Text.
All images within a website need to have an “alt” text, that is the image description that users will see if, for whatever reason, images won’t load or a screen reader will read out loud, providing blind or visually impaired users with information on what that image is about without having to actually see it.
The alt (short for alternative) text needs to be short and descriptive, informing about the content and function of the image, such as its purpose, meaning, or context within the page. If your image is purely decorative and has no effect on the content, then the alt tag can stay empty, however it still needs to be there as if not, a screen reader might start reading out loud the image’s source. Which would be hilarious. But also frustrating.
Learn how to write image alt text for accessibility here.
Related to: 1.1.1 (Non-text content)
10. Test. And then test some more.
Even if you do all those things, you still don’t know if your website is actually accessible (there, I said it) or not. The best way to do that is to simply test it. Use your website with keyboard only and make sure that keyboard navigation is fully supported, following a logical order. Disable all the images and see if you can still understand what’s happening. Use automated tools that check for accessibility errors and check if there is a “skip to content” link.
Now forget all the above. None of this is as efficient as asking users with disabilities to perform certain tasks on your website and see how much you’ve failed to deliver (I’m joking, I’m sure you will have done great). So, do that instead.
Web accessibility is about the little things that make your website easier to use for people with disabilities and, as it turns out, these small practices can help everybody. Obviously, the above list is not exhaustive, but it should be a good start to get you thinking. And if you’re feeling adventurous and want to expand on it further, you can follow the links to the related accessibility guideline(s) at the end of every tip. Have fun!
Start Your Web Accessibility Compliance Journey Today
Online accessibility is a journey, not a destination. Recite Me is here to help you every step of the way to provide an inclusive and compliant website. We save you time and money by highlighting what needs fixing first for most effective results and the most significant return on investment.
Get to work on your online inclusion strategy today by running a free check of your website for WCAG 2.1AA compliance.
