Insights
European Accessibility Act: a strategy for implementing it on your websites
According to the European Accessibility Act, by June 2025 most websites must facilitate navigation for people with disabilities. This legislative change has served to bring us face to face with a reality that had been knocking on our door for some time: accessibility. Allowing everyone to have equal access to digital services that are becoming increasingly essential is a necessary step that we must take as a society. And this, in turn, is also a challenge. Therefore, in this article we wanted to compile everything we have learned in our digital study on web accessibility in recent years.
We are living in an increasingly digitalized environment. Just think of how many important day-to-day transactions you currently carry out over the Internet: from making a bank transfer, to paying your electricity bill, to making an appointment at the doctor’s or booking a train ticket. Not to mention online shopping, which is increasingly raising against shopping in physical stores. Could you imagine now what your life would be like without being able to do all this online?
It may seem strange, but this is the situation in which many people find themselves today. We are referring mainly to people who are blind, deaf or have a motor or intellectual disability. But we can also include people with dyslexia, epilepsy, attention deficit disorder, with a common visual limitation (such as presbyopia, astigmatism or color blindness) or even the elderly. All of them -to a greater or lesser extent- have difficulties in accessing all digital services, which is a serious problem in their daily lives.
Although as expert UI designers our goal should be that the content of any website is understandable and easily usable by all the public, the truth is that we usually focus on only a certain type of users, ignoring those who do not comply with the standard. The so often mentioned web accessibility is understood in most cases as something unimportant or, in those who are aware of its importance, as a low priority issue. Until now…
What is the European Accessibility Act (EAA)?
The European Accessibility Act is a European directive approved in 2019 whose contents have to be transposed by the twenty-seven member countries of the European Union have into their national legislation by June 28, 2025. Its aim is to harmonize web accessibility standards in all states and ensure that, at a time when a large part of the services offered by companies and public bodies are carried out via the Internet, all European citizens can access them on equal terms. This measure is crucial, because many of these services are absolutely essential and, if not guaranteed, the inclusion and independence of people with physical or cognitive disabilities would be jeopardized.
So, in order to comply with the law and not be penalized, all companies must ensure that as of June 2025 their digital user interfaces meet features and functions that enable people with disabilities to access and understand content on an equal basis.
Which kind of companies are affected by the European Accessibility Act?
The European Accessibility Act affects all those companies (both European companies and those that operate or want to operate in the European common market) that offer through their websites or applications services classified as essential. And by essential services the EAA refers to practically all types of services:
- Banking services.
- Services related to air, rail, maritime or road passenger transport.
- Utilities (water, gas, energy and communications).
- News and entertainment media.
- Operating systems of any type of electronic device (such as computers, smartphones or televisions).
- ATMs, vending machines, check-in counters and other digital kiosks.
- e-Books.
- e-Commerce.
How to make a site accessible according to the European Accessibility Act?
It is often believed that developing an accessible website is costly and, above all, unattractive. But in reality, most accessibility requirements are subtle and do not involve adding new and complex functionalities.
The first step to achieve web accessibility of a site and comply with the EAA is to appoint an accessibility manager. His or her task will be to analyze your company’s digital products, detect their weak points, look for solutions and draw up an action plan to implement them. This person can be someone from the company or an external agency as well.
To perform this analysis, you can use tools such as Google’s Lighthouse, which provides an instant accessibility audit for any web page. When performing an accessibility test, it is normal to find dozens of errors on a single page. But don’t be panic: the vast majority of these problems are not very complicated to solve if you know how to do it and have the appropriate equipment. So in a short time you can improve the result considerably.
However, this is only a first step, as many points need to be checked manually. The ideal is to perform a more extensive analysis, with user tests and the use of applications such as Color Oracle or Sim Daltonism, which allow you to simulate how people with different types of color blindness would see your page.
What aspects are important for web accessibility?
To measure web accessibility, the European Web Accessibility Act uses the Web Content Accessibility Guidelines (WCAG) of the World Wide Web Consortium (W3C), the leading Internet standards organization, as a reference. The WCAG are nothing new: they were first published in January 1995 and have been updated ever since. Its latest version, released in June 2018 and revised in September 2023, is the one that companies should apply, although many of its key points have not changed since the first versions.
The World Wide Web Consortium establishes three levels of web accessibility: basic (A), global (AA) and advanced (AAA). The level required by the European Accessibility Act is level AA, and to reach it a total of 60 requirements must be met. In this article we are not going to see them all, but we are going to review the most important ones, grouping them into six main points which, if we pay due attention to them, will make any website considerably improve its accessibility. These points are: contrast, use of color, text size, content alternatives, semantic structure and keyboard navigation.
Make sure that colors do not impede the understanding of the content
Color is one of the most powerful design elements and, therefore, one of the most subject to fashion. So many times we web designers forget the fact that color is also fundamental to make content accessible.
One of the points where color has the greatest impact is in text. Some people cannot read a text correctly if its color does not offer enough contrast with the background on which it is represented. This is not an issue that can be solved at a glance: if a designer does not have any visual problem, he may easily differentiate a text on a background, but it must be taken into account that not all people will be able to do so. The WCAG states that, to obtain an AA level, the contrast between the text and the background on which it is displayed should be at least 3.0 for large texts (greater than 18px) and 4.5 for small texts. Don’t worry: to check if two colors together meet these requirements, you will find on the Internet multiple tools, such as Colour Contrast or plugins for Figma or any other prototyping tool.
However, too much contrast can also be wrong. Many dyslexic users are sensitive to high contrast caused for example when pure black (#000000) is combined with pure white (#FFFFFF). This can cause words to visually expand and contract, making them very difficult to read. For example, it is better to use a black #222222.
Don’t use color as the only way to convey an idea
For the same reasons, color should never be the only way to convey an idea that may be key to understanding a message. Did you know that about 9% of the population (mostly men) suffer from color blindness? This is an alteration of genetic origin in vision that, depending on its variety (deuteranopia, achromatopsia, protanopia, tritanopia…), prevents them from distinguishing well some colors from others.
For example, if you are going to highlight in red the fields of a form that are incorrectly filled in, it is very important to do it always accompanied by a supporting icon. Something similar happens with links: if they are differentiated from the rest of the texts only through their color, many people will not identify them well, so we must always try to keep the underline as a differentiating element, a feature that users have quite associated with links and that we designers often tend to eliminate for purely aesthetic reasons.
Special mention should be made of graphs, which can be especially difficult to interpret since color is usually used to differentiate one data from another. In these cases, strokes, shapes or patterns should be used. For example, Portuguese designer Miguel Neiva created ColorADD a few years ago, a solution that consists of applying easy-to-remember symbols to each color and which has already been applied, for example, to the Porto metro map.
Texts should be large enough
On most websites, text is the main form in which content is conveyed. So one of the first ways to improve web accessibility is to start working on the way texts are presented, especially their size.
No web text should be smaller than 10 pixels if it is to meet AA accessibility standards. Moreover, for most of the main texts, our recommendation is not to go below 16 or even 18 pixels. This ensures that they can be read well by people with some kind of common visual limitation such as presbyopia, which affects approximately four out of ten people.
Regardless of the text size used, it must be taken into account that some users (those with more serious vision problems) tend to enlarge the size of texts through the functionality offered by most web browsers. That is why it is necessary to always work with relative measures for texts, never absolute ones.
The line spacing (the vertical space between the base of a line and the base of the line immediately following it in the same paragraph) should be at least 1.5 times the font size, while the spacing between paragraphs should be at least twice the font size. These points are especially relevant to help people with cognitive disabilities or dyslexia to understand the content.
Finally, although the accessibility requirements of the WCAG focus on size, line spacing and paragraph spacing, there are other recommendations that you can follow to increase the readability (and accessibility) of the texts on your website, which we have already discussed previously in this blog, such as font type, alignment or the number of characters per line.
Never share content that is only accessible in one format
The best way to ensure that content reaches the greatest number of people is to always offer it in multiple formats.
Text is content that people who are blind or severely visually impaired can ‘read’ thanks to screen readers, navigation support software that interprets the text on a page and delivers it to the user either through a speech synthesizer or Braille output.
Images, on the other hand, are more complicated. In these cases, screen readers resort to reading the content of the alt attribute of the image element. Therefore, it is very important that this attribute always includes a small text describing the content of the image, something that many websites either do not include or do not do correctly. While some people argue that the text of an alt attribute should be a literal description of the image, at OKB Interactive Studio we believe that this is not very useful and we prefer a description that emphasizes the meaning of the image within the context.
It is also important that all pre-recorded audiovisual material contained on a website (whether video or audio) has subtitles so that its content is also accessible, in this case for deaf people.
Always use semantic HTML
Although text is reasonably easy to reach blind people thanks to screen readers, the truth is that these users (like everyone else) often also need to quickly read a page in search of specific content. For this it is essential to make a correct markup of the elements with semantic HTML, especially the titles (h1, h2, h3, h4…), since this is what screen readers use to create a content map of the web, so that blind people who use them can hear a list with all the points of the content and decide which one they want to go directly without having to listen to them all.
In general terms (and not only in terms of accessibility) HTML tags should never be used only for aesthetic purposes. W3C recommendations have long discouraged this practice, since each type of tag carries implicit information about its functionality and importance. So what makes a title a title is not the size or thickness of the letter with which it is represented, but its tag (in this case h1).
Another example of semantic HTML can also be found in forms. It is common to use the placeholder of a field as if it were its label, since it is very useful especially when space is limited. But it is not at all recommended. According to the World Wide Web Consortium, the placeholder attribute should be used as an example of the value a user is expected to enter in a form field, but not to indicate the name of the field, for which the label tag already exists. This is why screen readers used by blind users to browse the Internet ‘read’ aloud the contents of the label when the field receives focus, never in the placeholder. So, if the label is dispensed with, some users will not know what to enter in a form at all.
Finally, for those elements that have no semantic meaning (basically for the div and span) you should use the role attribute with an ARIA value. There are several types of ARIA, although the most common are form (for forms), main (for the main content of the page) or navigation (for the main menu of the site). There is also the aria-label attribute, which is used to add additional information to screen readers, although not all screen readers are able to read them.
Facilitates keyboard navigation
Visual or auditory limitations are not the only ones that users have. Many others find it difficult to perform certain complex movements with the mouse (or with the hand, in the case of interfaces for mobile devices). Therefore, when designing a website, avoid situations that require a lot of precision, such as intricate drop-down menus that in turn display new drop-down menus, or maps that require two fingers to scroll through them.
Due to these mobility limitations, many users resort to keyboard navigation, something that every website should facilitate to improve accessibility. In this regard, there are two things to take into account: the order of the interactive elements (which should follow the visual flow of the page: from left to right and from top to bottom) and the focus states, pseudo-classes that browsers apply by default to indicate that certain elements (on which some action is normally performed) are selected. Generally these focus states are represented with blue borders that many designers do not find very aesthetic and that, in many cases, are cancelled so as not to ruin the look of the site. But these indicators are very useful in terms of accessibility, so if they are removed, many people’s navigation will be hindered.
Finally, any on-screen element that a user can interact with should be large enough (about 48x48 pixels) and sufficiently separated from the rest of the elements to allow it to be operated reliably even by people with precision problems. In addition, keyboard shortcuts can be defined that are easy to use with one hand for the most common operations within the application.
More recommendations
Offering solutions to the cognitive limitations of some of your users is as important to improve the accessibility of a site as solutions to physical limitations. Simple actions such as allowing the pausing of content that is displayed in motion (for example a carousel) can be very useful for these people, as well as avoiding very generic texts in buttons and links (such as ‘click here’), as this makes it difficult to understand the final purpose of these elements. It is also important that no content on a page flashes more than three times per second, as this could affect people with epilepsy.
Why make a website accessible?
As you can see, with the new European Accessibility Act, for many companies web accessibility goes from being optional to mandatory. But making a website or application accessible should not only be seen as a legal issue. It is first and foremost a social responsibility and also a great opportunity, even for those companies that are not directly affected by this law.
First of all, it is an opportunity to reach a larger number of potential users, something that is undoubtedly always positive. Because when we talk about making a site accessible to more people, we are not referring to just a few more: according to the European Union, 20% of Europeans have some kind of limitation in accessing the Internet.
Another benefit derived from accessibility is that many of the efforts involved have a very positive impact on a site’s SEO. Pages with good accessibility tend to rank better in search engines, since the algorithms used to establish these search rankings usually pay close attention to aspects such as semantic HTML, while web crawlers work in much the same way as screen readers do when interpreting the content of a web page.
Accessible digital design seeks to make a digital product easily navigable for the greatest number of people. In essence, that definition is not very different from the one we could give to any design in general. So accessible design is synonymous with good design.
At the end of the day, everyone needs accessibility at some point. We can all suffer some temporary disability (such as having an arm in a cast) or even punctual, as when we have to make any management through our cell phone while we hold on to the subway bar to avoid falling or in environments where our attention span is very limited. So accessibility is always a positive thing and, as we have seen, it is not as much of an effort as it is made out to be.