Josefine Schaefer: Accessibility improves UX, performance, code readability, and maintenance

Web Accessibility basically means that the tools, technology, websites, and software are designed and implemented in a way that people with disabilities can use them and participate equally on the web.

As Josefine Schaefer, Developer Relations Engineer at Storyblok says, access to information is a basic human right and developers should do everything in their power to not create additional hurdles.

“It’s super important, especially for folks with disabilities, but it actually benefits all of us: whether you are looking at your phone in the sunlight and need higher color contrast or are using captions on a video in an environment where you can’t turn up the volume. All of these are accessibility features we all massively benefit from”

What should developers pay attention to?

What are some common challenges faced by users with disabilities when accessing websites?

Josefine: If you are interested in numbers, there is a great report by WebAim, it’s called WebAim one Million. They basically ran automated tests on one million websites to see what the most common accessibility issues are.

By far most common is low contrast text, missing alternative text and empty links or form labels.

Another big issue is keyboard accessibility: you want to make sure people can navigate your website with out a mouse, e.g. when they are using the keyboard or assistive technology.

What legal requirements or standards related to web accessibility are there?

Josefine: In the EU, there is a Web Accessibility Directive, which requires public sector organizations to have fully compliant websites since 2020, and accessible mobile apps since 2021. There is also the European Accessibility Act (Directive 2019/882), which is a landmark EU law that requires some everyday products and services to be accessible for persons with disabilities.

It follows a commitment to accessibility made by the EU and all member states upon ratifying the United Nations Convention on the Rights of Persons with Disabilities. It covers certain products and services, which from June 28th 2025 onward need to be compliant with Web Accessibility.

How to test for web accessibility

What are some methods or tools that developers can use to test the accessibility of a website?

Josefine: There are many different ways to test for web accessibility. A good place to start is usually a general, automated audit, like with the Lighthouse report where you can explicitly check for accessibility, or with the Axe Dev Tools. This kind of automated report will guide you through issues and provide explanations of what could be improved. This can then also be a starting point for further investigation. It will bring insights about color contrast issues, missing alternative text or empty links.

But regardless of how well it works, it’s important to double-check manually, test the keyboard functionality and if possible, have testers with disabilities who use screen readers and assistive tech natively.

The importance of semantic HTML

How can you ensure that images on a website are accessible to users with visual impairments?

Josefine: Always make sure that you include alternative text for images unless the images are purely decorative. The alternative text should describe in brief words what you are trying to bring across with the image. You don’t have to say “image of…” or “photo of…” as the screen reader will announce an image, anyway.

What is the role of semantic HTML in creating an accessible website?

Josefine: It’s super important to use semantic HTML to bring across structure and meaning, rather than just styling elements like spans or divs to look like, for example, a headline or a link. This way, you are conveying meaning to screen readers and assistive tech: by using landmarks for example, like a nav element, users can directly jump there and know what to expect. It helps screen readers announce content in a more structured way (e.g. in a list, it will tell the user how many elements and which elements it is currently on…).

Also, HTML elements come with some basic default styles and inherent functionality. Think of the element, for example, you can inherently click it, it has a hover style and a characteristic look. All of this, you would have to build in manually if you didn’t use the element – lots of time and energy saved!

Please describe the importance of proper heading structure in web content and how it contributes to accessibility.

Josefine: Part of semantic HTML is also the use of h1 – h6, in reasonable order. Use the different headline levels to create a meaningful hierarchy – this way, if you are using a screen reader like Voice Over for example (built into Mac), users can skip through links, headlines, or other interactive elements. This is much faster than going through all the content to find something specific.

Try using only a keyboard for a few minutes a day

Please describe the importance of proper heading structure in web content and how it contributes to accessibility.

Josefine: Part of semantic HTML is also the use of h1 – h6, in reasonable order. Use the different headline levels to create a meaningful hierarchy – this way, if you are using a screen reader like Voice Over for example (built into Mac), users can skip through links, headlines, or other interactive elements. This is much faster than going through all the content to find something specific.

Why is keyboard accessibility important, and how can developers ensure that all interactive elements on a website can be navigated using a keyboard?

Josefine: Keyboard Accessibility means that users can not only navigate a page with a mouse, but also use the keyboard, tab key, and arrows to navigate. A lot of assistive technology works in a similar way as the keyboard, so it opens up your content to a large audience. It’s also great for general user experience, as it can be much faster than using the mouse.

A few things to look out for in terms of keyboard accessibility:

• Make sure all interactive elements are focussable, and the focus state is visible (and has enough contrast),
• Make sure the functionality you would get through the hover effect is also applied for keyboard users,
• The reading order should be the same as when browsing through a page with the mouse: in English, that would be top to bottom, left to right.

Try it yourself: try only using a keyboard for a few minutes a day, visit your favorite web pages, and try to get around. Can be a nice learning experience.

Web Accessibility improves UX, performance, and SEO

Web accessibility best practices and guidelines can evolve over time. How do developers can stay up-to-date with the latest developments in web accessibility?

Josefine: That’s a good question. Some things change over time, but actually, most things stay consistent. A great place to start is the WCAG – the web content accessibility guidelines. Those are the rules to follow when making sure web pages and apps are accessible. A nice blog to follow is also the A11y Project – if something did change drastically, you would surely find out there.

How does web accessibility benefit not only users with disabilities but also website owners and developers?

Josefine: That’s the beauty of it, really: implementing web accessibility benefits all of us! Despite making a big difference for folks with disabilities, it also improves general user experience, performance, and likely search engine optimization. As a website owner, this will benefit your business as it increases traffic and makes your users happy; making your website accessible can help broaden your reach and offer your services to a wider audience.

If implemented correctly, web accessibility can help make the code more readable and easier to maintain, which benefits web developers. So: Win win win ☺️