FONIC Innovation through Accessibility

Motivation

There is a widespread assumption that accessibility affects just a few users. According to figures from the World Health Organization, however, around 15% of the world’s population lives with an impairment which either makes them dependent on barrier-free online content or means that they benefit greatly from it. This includes people living with permanent conditions, as well as those with temporary or situational impairments, like a broken arm, a lost pair of spectacles, reduced concentration while looking after children, or even harsh sunlight while working in the garden. By the time we reach old age, only a tiny minority of us are spared impaired vision, hearing, or mobility.

In addition, laws like the European Accessibility Act stipulate that products and services, including digital offerings, must be provided barrier-free as of 28 June 2025.

This meant that, in addition to the inherent customer benefits involved, FONIC had a legal obligation to develop a barrier-free solution.

Positive synergy effects

Deploying accessibility measures not only improves the quality of web content for its users, it also has positive effects on a site’s search engine rankings. Many accessibility measures, such as correct heading structure, responsive design, informative alternative texts, and meaningful labels and descriptions, go hand in hand with search engine optimisation (SEO) activities.

Implementation

In order to make the customer portal more accessible for all users and to take into account the upcoming legislative changes, inovex and FONIC rebuilt the FONIC portal in accordance with the four principles of accessibility. It needed to be Perceivable, Operable, Understandable and Robust (POUR).

The first project task was to evaluate which changes could be implemented easily and would provide major benefits for relatively little effort. The more complicated improvements were
then made following these “quick wins”. One significant challenge of the project involved the various third-party providers for Consent Management and Trusted Shops and the need to ensure the accessibility of the different services’ UI elements. Several providers provided accessible versions upon request, while other UI components had to be replaced by proprietary solutions created by inovex.

inovex used BIK’s BITV-Test to perform an interim evaluation. This comprehensive accessibility audit also includes affected users in the process and reveals the final barriers left to be removed.

To ensure that the FONIC portal remains accessible, even with the implementation of new requirements and features, inovex has anchored web accessibility practices firmly in FONIC’s development processes. Automated accessibility testing using a combination of Cypress and Testing Library ensure that features like smooth keyboard navigation can be sustained in the long term.

Project details

In terms of technology, the FONIC customer portal is a single-page application developed using the Vue.js framework. The portal’s accessibility was easily improved with simple measures.

The addition of alternative text for images and graphics, as well as semantic HTML, enabled all the portal’s visually represented information to be converted to text. This makes the application accessible by both assistive technology like screen readers and alternative input devices.

inovex optimised the visual elements of the UI by adjusting colour contrasts and adding a high-contrast mode. It was also necessary to ensure that the responsive design could handle multiple zoom levels. The content structure was improved, and inovex and FONIC ensured smooth keyboard navigation by using clearly recognisable focus indicators and a logical focus sequence.

Specific components which could not (yet) be modelled using native HTML were implemented accessibly by inovex using ARIA (Accessible Rich Internet Applications) roles and attributes.

Complex CSS visualisations which change according to user data were enhanced using dynamic text alternatives. The form validation process was also optimised to include barrier-free error messages, and it was made possible for users to adjust (text) colours and sizes to suit their specific needs.

Conclusion

The successful conversion of the FONIC customer portal into a barrier-free web application demonstrates that it is certainly possible to gradually modify existing content while still keeping up with daily business duties and requirements. It is, however, even better – and considerably more efficient – to take web accessibility into account from the outset. Web accessibility training gives designers and developers the knowledge required to create barrier-free design and code right from the very beginning. It enables quick wins, like the use of semantic HTML and sufficient contrast, to be implemented from the project’s inception with minimal additional effort and to be sustainably integrated into the development process.