Abstract graphics of cubes, hexagons, circles, a hand and a face as well as four people to symbolise teamwork. A standing person holds the graphics in the air, a person sitting in a wheelchair transports a box, a person equipped with blind cane carries a folder and another standing person presses bent against the graphics.

How Service Design can help your team to build accessible and inclusive digital products

Eileen Boerner
IBM Design
7 min readApr 25, 2023

--

During my time within the software industry, I have noticed that people tend to get discouraged when designing for accessibility. Accessibility can seem like a black box, with several questions looming. How do I start? How to estimate the effort without experience? How to integrate accessibility within the software development process? Several questions and rarely anyone or anything to relate to for practice hints. These are the aspects I found myself confronted with when first addressing the topic of digital accessibility. I am hoping that sharing my experiences reduces some of the concerns out there.

I am currently working as a UX Designer and Subject Matter Expert (SME) on accessibility for IBM iX for a large software development team that has been working on an application for several years. During the development process it was decided that the product must meet accessible standards. As a result, the accessibility testing revealed a large number of bugs that our development team found difficult to fix. The accessibility bugs only described THAT the elements on the screen were not accessible, but what they did not cover is the description on HOW to behave to be accessible. At this point the tickets were handed over to the designers. We needed to rethink the designs and behaviours across the entire application, with accessibility in mind. My design team was tasked with approaching those accessibility bugs and propose the needed solutions. This brings us to my core statement about the following problem:

How do you approach the accessibility transformation of a digital application project if the project has already been developed for years without accessibility?

This was an enormous challenge that took me a few attempts until I was able to handle it step by step. I would like to pass on my takeaways on how and why to integrate accessibility within the Service Design approach.

What is Service Design?

Service Design takes the end-to-end service experience of different users into consideration, including the backstage and frontstage. The backstage aspect covers the steps and processes that are not visible but need to function to deliver the best possible experience for the frontstage area.

“Service Design is the activity of planning and organizing a business’s resources (people, props, and processes) in order to (1) directly improve the employee’s experience, and (2) indirectly, the customer’s experience.” (Gibbons, 2017)

Therefore, Service Design helps us to consider backstage requirements to deliver a smooth customer experience.

Why integrate accessibility within the Service Design approach?

Digital accessibility is about maintaining certain minimum values. Among others, the Web Content Accessibility Guidelines (WCAG,2023) offer a structured and solid basis on which assistive systems can be founded.

Let’s dive into two examples for design aspects and two examples of development aspects of the created bug tickets to give you a hint of the content the project was confronted with.

One bug ticket pointed out that contrast values were too low, but it did not suggest color values that would solve the problem. Contrast values are crucial for accessibility to be sure that all content is visible on all screens. Having a clear vision on colour coding and existing brand colours as a designer can be a challenge, facing the defined contrast values as a minimum. It is nevertheless also something which can usually be adapted by minor changes of the colour palette. Another example of accessibilty concerns covers the requirement of providing alternative text descriptions for images and videos. These need to be implemented throughout all stages of the development as they help people with visual impairments. The challenge that arises is not only to point out the missing alternative text description of images for the individual features and screens but rather to precisely describe what the description should be. These are two common examples that designer can help with, but not all accessibility aspects can be covered by design only.

Example of a design with and without improved text contrast, and another design with and without a screen reader description of an image
Visualisation contrast and screenreader improvement scenario

The bug tickets also pointed out the lack of focus on interactive elements while navigating through the screen with a keyboard. Marking interactive elements as selectable within the code is essential to trigger functionalities. Another common bug dealt with the missing breaks of enlarged text contents which leaves the screen and could no longer be viewed by the user without a scroll function. Defining the maximum width of each component is key to not place content out of reach. Those two problems are examples which are being addressed by the developers to ensure the optimal technical structure within the code base.

Example of a design with and without keyboard focus indicators, and another design with and without text that reflows when resized
Visualisation keyboard focus and resizing fonts

This leads me to my first takeaway. The creation of an accessible application is not based on a single task for testing, development, design or even management. It is teamwork where everyone must fulfil their part to be able to cover all the accessibility criteria and to perform in the best possible way for our customers.

Accessibility is a team effort.” (IBM Accessibility, 2023)

How to integrate accessibility into the backstage of Service Design?

Now, let’s bring it all together.

Service Design is the best approach by considering the steps that need to be taken in the backstage area to provide an accessible experience to the users. Furthermore, we have identified that offering accessibility is a team effort that the backstage team must consider to set the foundation for an accessible service.

In other words, it is essential that the needs of people with disabilities are being considered in every step of the backstage process for digital products. By doing so, the tasks are well distributed and can be approached step by step. Let me formulate a few approaches:

List of 7 approaches, each discussed as numbered subheadings in the text
7 Approaches to interlink Service Design with accessibility for inclusive digital products

1 — Incorporate accessibility within the product/service goal

It is worthwhile to integrate accessibility into the project goal in order to make it part of the project’s moral standards and trigger important conversations. Personally, I believe that this is a positive side effect as other than solely creating new tasks, conversations are essential to build up knowledge.

2 — Offering accessible knowledge is key

Make sure knowledge is always easily available for everyone involved within the project. It is helpful to gather a list of links, presentations, guidelines, or videos on the general accessible specifications as well as best practices and relatable examples. An accessibility expert can be a great asset to any team, as they can leverage past experience and effectively distribute knowledge to designers, developers and testers.

3 — Reconsider potential effort for accessibility work during planning

The examples I gave above, like color contrast and text definitions, require additional efforts when designing a product. These should be considered directly within the project planning for design, development, and testing tasks in order to update the application step by step.

4 — Cover accessibility aspects within design definitions

The design task consists of the challenge to add the descriptions of accessibility behaviours to the design system piece by piece, component by component. It is important not to be intimidated, but to work your way from the most used components to the less used components while adding description like colour codes, screen reader definitions, resizing behaviours or dark mode appearances.

5 — Integrate accessible behaviour as part of the development tasks

Accessible behaviour should be incorporated into the definition of done of the tasks and special technical features dependent on the platform should be considered with each new development task.

6 — Test every new product aspect for accessibility

During testing, it is essential to test the accessibility features next to the standard feature behaviours and edge cases like error messages. The accessibility functionalities like screen reader or keyboard support are part of the standardized test steps where bugs are marked accordingly.

7 — Get direct feedback for your product/service

As usual, it is recommended to generate constant feedback from users and clients on functionalities to improve the product step by step.

Finally — Let’s do it step by step!

An accessible Service Design approach creates a stronger team and a stronger product. A product that is more stable and thought-out and a product that is not only about focusing on the inclusion of people experiencing barriers, but also improving the experience for everyone in every situation. Let’s approach the accessibility related themes without reservations and integrate it within our daily work to create a more inclusive and accessible digital world for EVERYONE.

The above story is personal and does not necessarily represent IBM’s positions, strategies, or opinions.

Sources

· Gibbons, S (2017, 09. July). Service Design 101. nngroups. https://www.nngroup.com/articles/service-design-101/

· Web Content Accessibility Guidelines (WCAG) (2023.21 March). WCAG Overview. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/standards-guidelines/wcag/

· IBM Accessibility (2023, 10. March). IBM Accessibility. IBM. https://www.ibm.com/able/

--

--