Pink text on a white background, squiggly lettering and a flickering video in the background. What looks to some like their passionately curated Pinterest board on the way to their first website becomes a hurdle for others. Design decisions can make your website unusable for people or even a danger to their health.
Accessibility is still a topic that hasn’t made it to every corner of the internet. Even though it’s so important for your business. And it shouldn’t matter at all.
Why accessibility on the Internet is important
In 2024, there were 7.9 million people in Germany with a severe disability¹. That’s almost one in ten people. Some of them have difficulties processing information, seeing, hearing or moving.
The people around you use your website in very different ways. While your niece scrolls on her smartphone, your father zooms in so far on his tablet that you could recognize every pixel individually. A friend navigates your website using just the keyboard and your neighbor has a screen reader read out your pictures. And then there’s someone a few streets away who uses voice recognition software to contact you.
At least that would be the ideal idea. Your website that can be navigated and understood by different people – in the way that suits them best. But is that really the case?
How accessibility boosts your sales
Have you ever tried to navigate your website without a mouse, just using the keyboard? And what happens if someone can’t see colors? Will your beautiful graphics still be recognizable?
How many more people would find you appealing and book with you if only they were given the opportunity? A website that is not accessible may cost you sales.
And not just directly. Search engines such as Google and Ecosia also love accessibility elements such as clear text hierarchies and image descriptions. Barriers can also make your website less visible.
And then there’s the values thing. People today prefer to buy from brands that share their own ideals and values². Whether a website is accessible or not at least says something about the priorities of the brand behind it. And how nice would it be if your online home could also be a safe space for your target group and they enjoy buying from you?
Why that shouldn’t matter at all
Not to mention the potentially higher turnover. Wouldn’t it just be fair to give everyone access to the Internet and the information it contains? If we only do this because it might increase our turnover, we are reducing people to their purchasing power instead of seeing them as equal fellow human beings.
As a web designer, I feel it is my responsibility to provide access for as many people as possible and to make the Internet a little fairer for everyone.
That doesn’t mean that my websites are perfect. It can be difficult to make a website truly barrier-free. But we can all do our best to at least make it accessible and give as many people as possible the chance to participate.
3 really simple implementation ideas to get you started
To get you started, here are three ideas to make your brand and website a little more accessible.
1. colors that not only look good
Sufficient color contrast between your brand colors ensures that even people who can only see a few colors or none at all can read your text.
In a color contrast checker of your choice, e.g. the Contrast Grid from Eight Shapes, you enter the HEX codes of your brand colors. The colors that have sufficient contrast to each other are marked with AA or, even better, AAA grades. All other color combinations should not be used together.
2. legible fonts
Even if the squiggly or totally wacky font in your headline may look cool – use it sparingly, as it can be difficult to read. Your headings and paragraphs in particular should be written in a font that is easy to read. You can then design accents, such as your signature, in your fancy cursive font.
3. pictures that speak
Not everyone can see your pictures. So that they still know what you want to tell them, the alt text is read out to them. Provided someone has created it beforehand. To do this, go to the settings of your image and describe in a short bullet point what can be seen in the image.
Search engines also read these descriptions and find out when to display your image in the image search.
3 things you haven’t thought of yet
Of course, these are just the first three things on a long list of things that make a website more accessible. If you’re someone who navigates the internet with ease, there are bound to be a few hurdles you haven’t thought of. Here are three more food for thought.
1. where to click?
Imagine you want to find the contact form of a service provider. No problem, right? But what if you can’t see the website? Suddenly you’re faced with a sea of “Click here” buttons, one of which leads to the contact form. But which one is it?
To prevent this problem from occurring on your website, you should clearly label the buttons. For example, “Write me a message” or “To contact form”. This makes navigation much easier.
2. the right hierarchy
Websites are like books. There is a title, several chapters and sometimes even sub-chapters. However, if all these texts look the same, it becomes difficult to recognize when it is a title, a chapter or a subtitle.
You can imagine something similar on your website. The texts in the code must be set correctly so that screen readers can read out the website correctly or jump from chapter to chapter.
Each subpage of your website begins with a title, which is set as heading 1. This is followed by subheading 2, 3, 4 and so on. This way, search engines also know what the title is and what your page is about.
Do not select the respective type of heading according to its appearance, but follow a clear hierarchy. Of course, a heading 1 can be followed by several headings 2 with subheadings. Just like a book has several chapters.
3. make this bigger
Maybe you know it from your family: Grandma wants to see your picture on the website, so she zooms in first. But maybe she also wants to read the text around it? On too many websites, this has now disappeared because the layout of the website does not adapt to the zoom and the size of the screen.
Try it out. What happens if you zoom your website to 200%? Is everything still there and recognizable? Whether this works often depends on your website system.
How you can get started
Before you panic, why not test your website? Without the mouse, zoomed in really hard or in black and white using the Chrome developer tool (right-click on your website → Examine → Rendering → Emulate vision deficiencies).
And then you take care of the things that are easy to change, such as the colors, buttons and image descriptions. And your website will be a little more accessible. For the next steps, it’s worth reading up more on the subject or getting professional help.
Let’s make the internet a better and fairer place for everyone!
Sources
¹ Federal Statistical Office (2024)
² Narayanan S, Das JR (2022)
About the author
Maike ist Webdesignerin und Gründerin bei Maia Studio und unterstützt werteorientierte Selbstständige, Sozialunternehmen und gemeinnützige Organisationen dabei, mit menschlichen Squarespace Websites sichtbar zu werden, Haltung zu zeigen und Vertrauen zu potenziellen Kund:innen aufzubauen.
Dabei beschäftigt sie sich zum Beispiel mit:
✿ feministischem Marketing und Diversität in Designs
✿ digitaler Barrierefreiheit
✿ Social, sowie Female Entrepreneurship und Selbstständigkeit
✿ werteorientiertes Webdesign ohne Dark Patterns
Auf www.maiastudio.de kannst du mehr über Maike, ihre Geschäftspartnerin Bex und ihr Angebot erfahren.
