Five essential tips for a better Web Accessibility
7 min read
This is the start of a small series of articles focusing on Web Accessibility (short: A11y) topics. I'll show you how we improve our code to break down barriers and how to not exclude people from using our products and services.
A short introduction to Web Accessibility
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
— Tim Berners-Lee, W3C Director and inventor of the World Wide Web
Web Accessibility is often associated with screen readers and poor graphic design. However, Web Accessibility is actually a part of User Experience (UX) that focuses on making websites usable for the widest possible audience, including people with disabilities. It can be broken down into four key categories:
- Visual – This can be non-sighted users, users with low vision, users with obstructed vision, or even simply your aging parents.
- Auditory – The web is a visual medium, but captions and fallbacks for sound-necessary media need to be considered for hearing-impaired users.
- Motor – People with motor impairments typically use a wide range of Assistive Technology (AT) from specialized keyboards, to eye trackers, to using single buttons (a device known as a »switch«) to navigate their computers.
- Cognitive – Relates to the ease of processing information.
Plus not to forget temporary disabilities. There are often situations in which even fully-abled people are »temporarily disabled«. For instance, an arm or wrist injury may temporarily prevent you from being able to use a mouse.
European Accessibility Act (EAA)
The European Accessibility Act (Directive 2019/882) is a landmark EU law which requires some everyday products and services to be accessible for persons with disabilities. It will make life easier for at least 87 million people – almost one in five Europeans – who have disabilities, including many older people, and for those who have a temporary impairment.
As of June 28, 2025, customers will be able to file complaints before national courts or authorities if services or products do not respect the new rules, including:
- computers and operating systems
- ATMs, ticketing and check-in machines
- smartphones
- TV equipment related to digital television services
- telephony services and related equipment
- access to audio-visual media services such as television broadcast and related consumer equipment
- services related to air, bus, rail and waterborne passenger transport
- banking services
- e-books
- e-commerce
What companies and organizations are affected?
The EAA affects businesses based in the EU or those targeting the EU market. Compliance with the Web Content Accessibility Guidelines (WCAG) is essential for web-based businesses, that do:
- news services (such as news websites)
- selling (books, financial services, travel services, etc.)
- advertising
- professional services (lawyers, doctors, estate agents)
- entertainment services
- basic intermediary services (internet access, transmission, and hosting of information)
- free services funded by advertising, sponsorship, etc.
Status Quo
Often, product managers and/or stakeholders put accessibility as a low priority to save time and money for other more »important« features. From my 25+ years of experience, I can say designing a product to be accessible from the start adds only very little time and effort. The opposite is actually the case. If you think you can do it later and put accessibility at the end of the project, it will cost you many times more. Trying to make an existing product accessible too late is time consuming, costly and could even require complete code rewrites. Hence my call: Save yourself and your team a lot of trouble and think about accessibility right from the start. It will save your business a fortune and a lot of hassle!
Now the fun part, my top 5 a11y tips
Heading structure
Headings form the framework for the content of a page. A visitor should be able to browse the webpage based on the headings to get a good overview of the content. Especially screen reader users (and search engines) benefit from a well-structured heading outline.
Here are some best practices to follow:
- Use one unique
h1
per page that describes your main content. Thish1
should be placed above it. - Use (multiple) headings
h2
toh6
to structure your content below. - Do not use any heading just to make the text appear bigger. Decouple your styling from the heading level.
- When using different heading levels the order must remain intact. That means an
<h1 />
is followed by an<h2 />
, an<h2 />
is followed by an<h3 />
and so on. Don't skip any heading levels in between, leave them empty or just throw in anh6
somewhere. Of course you can place multiple headings with the same level after each other. An example:
<h1>My garden</h1>
<h2>Fruit</h2>
<h3>Apples</h3>
<h4>Braeburn</h4>
<h4>Cox Orange</h4>
<h2>Vegetables</h2>
<h3>Salads</h3>
<h4>Iceberg lettuce</h4>
<h4>Romaine lettuce</h4>
Bonus tip: If you have a really complex document and you may find that you need a 7th heading level, you can do this little trick.
<h6>A typical h6 headline</h6>
<div role="heading" aria-level="7">
Followed by h7 headline that natively doesn't exist
</div>
You can even easily target it with CSS:
[aria-level="7"] {
font-weight: 700;
}
Provide text for non-text-content
Any content that is not represented by text isn’t visible to screen readers (and Google’s search bot). For this reason a short description must be provided. Here are some examples:
For the img
Element, the alt
attribute is mandatory. Fill it with descriptive text of what is shown in the image (and not just the filename like image.webp
). There’s one exception to this rule: If the image is just for decorative purpose and conveys no meaningful information, the alt
attribute must be set, but left empty alt=""
. An even better solution for decorative images would be to embed them via CSS as background-image
.
Often, an icon-button is used without further context, like a close button inside a modal or prev/next buttons inside a slider. In this case, use aria-label
on the button, so screen readers can announce them correctly.
<button type="button" aria-label="Close modal">
<svg aria-hidden="true" fill="currentColor" focusable="false" viewBox="0 0 24 24">
<path d="…"></path>
</svg>
</button>
Colors and color contrast
Colors shouldn’t be required to understand content and its current status. For example, don’t just highlight errors with red text. Instead, also add an icon or a visual border. To understand how color blind people see your webpage – an estimated four million people in Germany are colorblind –, you can use the Colorblind Web Page Filter.
A poor color contrast between foreground and background can make text difficult to read. For people with visual impairments, the standard contrast ratio is at least 4.5:1, for large text it’s 3:1. This is also the minimum requirement for passing the WCAG AA test. Use the Contrast Checker to validate if your colors have enough contrast.
The :focus
must always be visible
Users who cannot use a mouse for some reason often use a keyboard to navigate web pages. By default, they use TAB
and SHIFT + TAB
to move from one focusable element on a page to the next. To be able to do this …
- all interactive elements like buttons, links and areas must be focusable by default.
- the currently focused element must be visibly highlighted where it is not entirely hidden due to author-created content.
- the focus order should be comprehensible for the user.
Don't use outline: 0;
to suppress the default browser outline. If you don't like the default color or perhaps want to adapt the style to the corporate design of your website, feel free to change it. But take care that the contrast ratio is high enough – minimum 3:1 – so everybody can see it immediately.
Bonus tip: When opening a modal, the focus should move to the first focusable element within it. Also, the focus should be trapped, which means pressing TAB
or SHIFT + TAB
cycles the focus within that modal only. The typical page content behind it mustn't be accessible via keyboard as long as the modal stays open.
Use lang
attributes
Setting the language of the page is important for people who use Assistive Technology (AT). Additionally, it helps Google provide translations with ease.
<html lang="en">
Besides putting the lang
attribute on the root element, you can use it inside your content as well.
<html lang="en">
<p>
The german translation for »my friend« is
<span lang=“de”>mein Freund</span>.
</p>
</html>
Bonus tip: If you are using a language that is written right to left, be sure to specify this by using the dir
attribute:
<p lang="ar" dir="rtl">Arabic text</p>