FONIC Innovation through Accessibility

Technologies

Timeframe 2021 - 2023

Customer benefits

  • Improved usability & user experience through a completely barrier-free customer portal
  • Fulfilment of legal requirements
  • Long-term integration of web accessibility into the development process

For several years now, Telefónica and inovex have been working on the (further) development of the FONIC mobile phone brand’s customer portal. The project focuses on user satisfaction and the continuous improvement of the portal – both technically and in terms of user experience. The increasing awareness of the importance of web accessibility, as well as forthcoming legal regulations, provided the impetus for our involvement with this topic. We were keen to discover the challenges and  opportunities involved in implementing a barrier-free portal for FONIC.

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.

Das Fonic Kundenportal mit einem Querschnitt von Light- und Dark-Mode
The new Fonic customer portal with comparison of dark and light mode.

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.

Foto von Yaren Sahin, Sales

🗓️ Appointments available
Book your initial consultation - free of charge and without obligation.

Yaren Sahin
Account Manager New Business
inovex Logo
Go back
Foto von Yaren Sahin, Sales

I look forward to your inquiry.

Yaren Sahin

Make your applications accessible

Make applications and portals more accessible for your customers. We will be happy to help you!

Book appointment
Foto von Yaren Sahin, Sales
Yaren Sahin
Account Manager New Business
  • Improve user experience
  • Accessibility according to legal regulations
  • Addressing larger target groups