When we started working on the new Europeana collections website in 2019, we discussed web accessibility as an important criterion. All European public sector websites should be accessible according to the European Web Accessibility Directive. Web accessibility means that websites, tools and technologies are designed and developed so that people with disabilities can use them. Or, in other words: people can perceive, understand, navigate and interact with the web. And in addition, they can also contribute to the web (see Introduction to Web Accessibility, W3C).
According to World Bank Blogs, 15% of the world’s population experience some form of disability. It includes people who are blind, people who cannot hear, people with cognitive disabilities or people with physical problems. But web accessibility also has benefits for people without disabilities. This could include people who have a slow internet connection, older people, people using small screens or those having temporary disabilities, like a broken arm. In summary, web accessibility has benefits for all and it is an opportunity to reach a wider and more diverse audience. In a broader context, web accessibility is just one aspect of diversity and inclusion.
At Europeana, we are making an effort to make our products accessible and our aim is to meet the international Web Content Accessibility Guidelines (WCAG) guidelines level AA (WCAG 2.1). We want everyone to be able to be part of - and enjoy - what we do. We want to help our partners to reach new audiences, whatever their accessibility needs. So we are always working on using existing and developing innovative technologies to make sure digital culture really is for all.
Meeting the guidelines
Accessibility guidelines are not only about code, they are also about design, text, media, language, forms, and documents. That means developers, designers, editors and product managers - among others - are all involved in making websites accessible.
For example, one set of guidelines is about structure. It is easier for people to understand website structure when there are clear titles and headings, which make it easier to scan and navigate a webpage. And for people who rely on a screen reader a clear site structure is important. Our UX team identifies the design of these structural elements - for example, important headings have a larger font size than the less important ones. Developers represent the structure in code. And the editorial team uses these elements in their content.
‘We think about accessibility as soon as we start designing a new feature’, says Europeana’s User Experience Designer Romain. ‘The idea is trying to make sure nobody is excluded from the beginning. For me as a designer it means considering things such as colours and contrasts, size of elements, structuring content logically, making sure the text and labels are clear and understandable.’
Verification of the guidelines
To verify if the Europeana website meets the WCAG guidelines, we run both manual and automated tests. The automated tests, for which we use the accessibility testing tool Axe, are part of our build process. Every time a new feature has been added, tests check for accessibility violations. Senior Developer Lutz Biedinger says: ‘As a general rule of thumb I will try to stick to established standard approaches as much as possible, as these are the most likely to have accessibility solutions which users are already familiar with. Then at a basic level, I will rely on automated checks to flag known detectable issues. Finally, it's important to simply try it and let someone else also test the functionality in order to identify additional issues.’
While we always try to plan for accessibility, sometimes testing shows that things have to be changed to meet the guidelines. One example is ensuring enough contrast between text and background images. ‘The hero banner was initially designed for major visual impact, occupying most of the screen real estate while displaying the high-quality imagery that we have available’, explains Senior Visual Designer Carlos Marcelino. ‘The text, while in a good position, would have to rely on a very contrasted image to be fully readable, which made choosing images a challenge. This made us rethink the whole section, having accessibility as a starting point, so we separated image and text entirely while retaining prominence in both elements.’