ForTheDoers Blog

Website accessibility is embedded in good digital design

Mika Ylinen  ·  19 January 2021

Fortum has a number of digital services, platforms and applications that facilitate the online activities of our customers and other stakeholders. Accessibility is about making these services available to everyone.

Conceptually, digital service accessibility means that everyone has an equal opportunity to use the services and to operate in the digital society. Good accessibility requires the identification and consideration of users’ different needs and limitations – from the design phase to implementation. Common impairments are related to vision, motor skills or cognitive abilities (dyslexia, learning disabilities) – they impact how we can receive information and use online services. Ambient conditions, or even an old computer and a slow internet connection, can inhibit the use of digital services.

The Act on the Provision of Digital Services (1) that took effect in Finland in 2019 sets requirements for online services. The digital services act is influenced by the EU website accessibility directive and the UN Convention on Rights of Persons with Disabilities (2). One of the goals of the statutes is to make the recognition of accessibility part of the normal process. In practical terms, this means that accessibility would be understood as a key principle that should be taken into account in all design, implementation and maintenance of web content and services.

Even though the Act on the Provision of Digital Services is mainly binding on public authorities, some of the private sector is also subject to the requirements. Since the beginning of this year, the Act on the Provision of Digital Services also applies to service providers in e.g. the water and energy sector; accordingly, Fortum too is legislatively obligated to comply with the level A and AA criteria of the international Web Content Accessibility Guidelines (WCAG) (3), which set the minimum requirements for the creation of accessible services.

Accessibility strategy at Fortum

Fortum’s accessibility strategy fundamentally aims to offer all users the best possible user experience regardless of the individual’s limitations or abilities. We believe that an accessible design ultimately provides a better user experience for all, and for this reason, it is embedded into our design process.

Our accessibility strategy can be divided into three areas: accessibility assessment, design, and implementation. The functions responsible for these areas are design, development, and content creation, but in reality, the responsibility lies with every one of us. Ideally, everyone understands the issue and addresses it in their own projects so that service accessibility is ensured from an early stage.

1. Accessibility assessment

We actively assess the current status of our digital services. Naturally, there is plenty to map: Fortum has dozens of digital platforms, services, and applications. When the web content of all our different country pages is also included, we are talking about thousands of content pages.

The accessibility assessment can target an existing service or the procurement phase of a new service. We have built internal tools to carry out accessibility assessments, and we’ve streamlined accessibility guidelines to make them as easy as possible to internalize.

The accessibility assessment findings of an existing service are recorded and any shortcomings are presented in the accessibility statement included in conjunction with the website or service. The accessibility statement is one of the requirements of the Act on the Provision of Digital Services, and with the act’s entry into force a link to the accessibility statement has started to appear at the bottom of many web sites, usually in the footer.

2. Accessibility design

In the design phase we apply the lessons, common practices, and digital design principles we have defined together. We have gained our best knowledge about Fortum’s digital services user experience through numerous user tests and interviews with our customers.

Today our digital services are divided into components that, in a way, are like building blocks. These blocks are used to build the big picture – Fortum’s style is embedded in each block, and the functionality and accessibility of each block has been verified.

One example of a Fortum building block is the seemingly simple button that you constantly encounter on websites. The button instructs the user to easily perform an action, like save or log in.

Fortum Design System (Elemental) plays a key role in the building of accessible digital services. It’s kind of like a library with a comprehensive collection of all the know-how related to digital design and implementation as well as accessible content creation. Elemental offers ready-made components to build digital services. Our digital products are built from these individual components.

Screenshot of Fortum's design system page
Fortum Design System is a library with a comprehensive collection of all the know-how related to digital design and implementation and accessible content creation.

Fortum Accessibility Checklist has been created to support accessibility design; it serves the needs of design, development and content creation. The checklist is one of the most prominent tasks done for accessibility, and it has been designed purely from Fortum’s starting points. The checklist is based on Web Content Accessibility Guidelines, but it aims to describe things in a clearly understandable language, as well as with examples and summaries to improve understandability and effectiveness.

3. Accessibility implementation

In the implementation phase, our developers use the same Fortum Design System with designers, so accessibility has already been thought out. Every one of our components complies with the WCAG criteria. At Fortum, the technology aspect of accessibility has also been taken into consideration. One challenge is the component-specific requirements and context. That is why accessibility implementation is also partially the responsibility of the developer. At Fortum, developers are systematically instructed in this and projects are actively supported.

From the development perspective, it is essential to take WAI-ARIA specifications into consideration. ARIA is a technical framework to implement accessibility standards. ARIA provides developers with an opportunity to describe the user interface to users using assistive technologies, such as screenreaders.

Usability assessment and testing is an essential phase following implementation. The purpose of testing is to demonstrate the practical functionality of the implementation and, ultimately, to ensure accessibility and the desired user experience.

The work continues: case brand colour

Ensuring accessibility isn’t always easy. For example, Fortum’s green brand colour (optimistic green) cannot be achieved with white text in digital services because the contrast ratio of the colours is not sufficient. Enhancing the contrast ratio of the colours can ensure adequate colour separation in different situations and give consideration to the different needs of users. A sufficient contrast ratio for normal text is 4.5:1.

Screenshot of adjusting colour codes
Enhancing the contrast ratio of the colours can ensure adequate colour separation in different situations and give consideration to the different needs of users.

Since our main brand colour is widely used in numerous contexts both on the internet and in our mobile apps, changing the colour felt like a radical solution. And it didn’t help the matter that the colour in question is a key element of our brand – as it’s our logo colour.

Fortunately, colours can be used in many ways, and there are numerous ways to display colours. Instead of us changing the colour, we reduced its importance in contexts critical for accessibility. The final result is a corrected content fulfilling accessibility criteria in terms of the contrast ratio of colours.

Even though there is still work to be done in accessible services, we are now constantly moving in the right direction, step-by-step, improving the user experience of our digital services – for everyone.

Mika Ylinen

Mika Ylinen

Lead Visual Designer
mika.ylinen@fortum.com

Subscribe to ForTheDoers newsletter

Subscribe

The latest blog posts and articles in a newsletter to your mailbox