Accessible web design in 2025: how to make everyone feel included

If we’re taking away hurdles in buildings, then why are we putting them back on websites?

There is much being done to make buildings more accessible these days — adding wheelchair ramps, automatic doors, tactile pavement, and accessible walkways. And yet, too many people are still being excluded from digital spaces. Accessible web design is far from pervading the internet. Illegible text, inaccessible navigation, images missing alt text, and so on, online hurdles may be less visible, but are by no means less common. In this article, we take a closer look at some of those digital hurdles and show you how to make everyone feel included.

Increasing Colour Contrast for Accessible Web Design

High contrast and contrasting colours are essential to accessible web design in 2025. In order to clearly make out the information in the foreground from the background, colour blind and visually impaired web users need a clear contrast. If the contrast is too low, as is the case with light blue text on a white background for example, the text can be hard to read or even completely illegible.

The Web Content Accessibility Guidelines (WCAG) prescribe a contrast ratio of at least 4.5:1 for regular (smaller) text. Text larger than 18pt (or 14pt when bold) only needs a contrast ratio of 3:1. The image below clearly shows the difference between low contrast and high contrast, and how it influences legibility.

Keyboard Navigation in Accessible Websites

In order for a website to be accessible, users should be able to navigate through all pages by exclusively using their keyboard. This includes being able to scroll with the arrows keys and using the tab key for interactive elements like buttons, links, and forms. Aside from those keys, there are a couple more:

Enter:
The enter key is used for confirming or activating an action. For example, if you used the tab key to navigate to a button, link, or element in a form (e.g. dropdown or send button), you can use Enter to activate the element, similarly to a left mouse click. In accordion sections, you’ll also often use Enter to expand or collapse certain content.

Escape (Esc):
The escape key is used to close or cancel an action. For example, it can be used to close pop-ups, dropdowns, or search fields that open automatically. Users should always be able to close these kinds of elements without having to use the mouse.

Visible Focus During Keyboard Navigation

One of the most important principles of keyboard navigation on accessible websites is to have a way to visualise which element is in focus. Users can navigate through a webpage by using the tab key — jumping from one interactive element to another. It goes without saying that users need to see which element on the page is in focus, whether it be by adding a box around it, changing the colour, or adding a shadow. Without some kind of focus indicator, your web design is not accessible, because keyboard users will get lost on your website. Of course, that focus indicator should also have a sufficiently high contrast ratio so that it actually stands out from the page.

Next, you have to make sure that the tab order makes sense. Computers use the source code when determining which element should be in focus next during keyboard navigation. It’s important to make sure that your website’s HTML is structured well, because the computer will read the code from top to bottom. So make sure that your site’s navigation bar, for example, is all the way at the top of the code, even if you’ve used CMS to visually position it elsewhere.

It’s just as important that interactive elements, like sub menus, react the way they should with keyboard navigation. So if you land on ‘Services’ in the navigation bar, the sub menu should open automatically, and users should be able to move through all of its pages before moving on to the rest of the bar. This will ensure a logical and predictable user experience, even without a mouse.

Website Accessibility for the Visually Impaired and Screen Reader Users

Accessibility When Zooming in to 400%

You don’t want to lose any functionalities or text when your users zoom in on your website. Neither do you want horizontal scrolling, as this considerably worsens user experience. We also recommend not adding any text on top of images, the effect you’re trying to achieve will often be lost when zooming in a lot, to 400% for example.

Luckily, the accessible solution is easy enough: design your website for mobile devices. Responsive web designs, which automatically adapt to different screen sizes and zoom percentages, will help avoid most problems.

Why Alt Text Is so Important to Inclusivity and Visibility

When using functional images on your page, it’s important to add a clear and accessible alt text (alternative text). These texts are read out loud by screen readers and offer additional context to users who can’t see the image or have trouble making out the details. This way, they won’t miss out on the meaning of the image on the page.

What’s more, using alt text will improve your SEO. Search engines see descriptive alternative text as a very important factor, because it helps them better understand your page’s content and index it.