On the way to an accessible website - a field report

In December 2023, after an intensive period of development with our agency ressourcenmangel, the new Accso website went live. Our marketing team said goodbye to historically grown confusion in the backend and technical complexity and looked forward to a new CMS (Craft), a new corporate design and greater user-friendliness. So far so good.

Anyone who has ever accompanied a website relaunch knows this: That's not the end of the story. Since going live, a lot has happened and a small team is continuously working on the further development and optimization of our website.

A few months ago, a larger project became apparent: even though the accessibility of the website was taken into account from the outset, there were still a number of areas that were not yet ideal. The experts in our in-house UX community also took a close look at the new website. For our development team, but also for me as the product owner and the editors, it was often difficult to assess how big the construction site really is, what effort is involved and whether it is worth investing time in the topic. Spoiler: it's worth it!

After a visit to the Java User Group Darmstadt and a report by Matthias Bünger on the implementation of accessibility, the decision was made: we will devote ourselves intensively to the topic and carry out the BITV test.

6 weeks and 98 test steps towards accessibility - determining the status quo with the BITV test

The BIK BITV / EN 301 549 test (web) is a procedure for comprehensive and reliable testing of the accessibility of websites, web applications and apps. It is based on the requirements of BITV 2.0 , which references the European standard EN 301 549 V3.2.1 (PDF). In addition to the WCAG 2.1 criteria for the web, EN 301 549 contains further mandatory requirements.

Various steps can be used to check the accessibility status of web products. The result is a detailed test report that shows which measures should be taken next. The perfect basis for assessing our starting position.

The test can either be commissioned or carried out in-house. We decided to carry out the test ourselves in order to develop a basic understanding of accessibility in the editorial team.

Disclaimer: There is no independent quality assurance in the self-assessment. This means that the results depend heavily on the level of knowledge and diligence of the person carrying out the test. If you really want to be sure, you need different testers with different restrictions.

Procedure of the test

On the advice of Tobias Holstein - Community Lead UX - who has already carried out the test for customers, I blocked off one day a week for the next 5 weeks. A good recommendation, as the test is very tedious due to the 98 small-scale test steps and the use of various tools that have to be installed and uninstalled again. In the end, the entire website audit took me six weeks, of which I spent half a day to a whole day per week.

For the self-assessment, you log in to the test website and create a test order. You are then guided through the various test steps and receive detailed descriptions of what needs to be checked when, where and how. This includes, for example, subtitles for videos, alternative texts, color contrasts, keyboard operability, but also the documentation of non-accessible areas.

The various tool tips available on the BITV test page are particularly helpful. These make it possible for people without development experience to carry out most of the test steps. The results of each step can be conveniently recorded in the web application.

So I installed various tools such as a screen reader, color contrast analyzer and a web accessibility evaluation tool and got started. Parallel to the test, I created Jira tickets for the development team and to-dos for our editors.

Many Jira tickets and learnings for the editorial team for more accessibility at Accso

The result was 22 Jira tickets and some insights into necessary changes in the way the editorial team works. However, I was very pleased to see that we had already completed a large number of the test steps. Here are a few insights:

Technical improvements:

The biggest technical issue for us was the keyboard usability of the site. Sliders and carousel elements were difficult to access, could no longer be exited or could not be clicked. Elements could be selected but were not focused, dropdowns could not be opened.

There were also still some open issues when labeling elements with HTML or aria labels.

Editorial improvements:

There were also some technical improvements to be made. For the editorial work of our marketing team, the consideration of accessibility also means a rethink in their daily work. Our findings:

• Subtitles in videos not only help people with disabilities, but also make consumption without sound possible in the first place, for example on social media.
• Alternative texts for images are created quickly - AI can provide great support here! Subsequent maintenance is less fun.
• Thinking about contrasts when choosing colors from the outset makes things a lot easier.
• It's worth taking a look: many public institutions are obliged by BITV 2.0 to make their services accessible. You can use this as a guide and gather inspiration for accessibility declarations.

Top tips for greater accessibility:

• It's better to schedule half days or individual days over a longer period of time for testing, rather than doing everything in one go.
• It is an advantage if you know the website and the modules used. This allows you to quickly identify the pages that are relevant for the test steps.
• As an inexperienced person, it helps to be able to ask experts about details.

Helpful tools for daily work:

• Colour Contrast Analyser for high-contrast graphics and the right color selection
• ChatGPT & Co for creating ALT texts for complex images and graphics
• Wave as a tool for showing and explaining barriers
• JavaScript Library - KoliBri as a component library for accessibility

Conclusion:

The BITV test increased my awareness of the issue of accessibility enormously and was the ideal start to further develop our website. We now know which open to-dos we still have and can work through them one by one. Although our website is not yet barrier-free in some places, we now know where we can start.

Many thanks to Tobias Holstein and Jonas Brüggen for their technical support!