With millions of users interacting with SAP products every day, we have a responsibility to go beyond accessibility basics to ensure that every user has the best experience possible. In order to do this, we needed to shift accessibility from an afterthought to the start of the product creation process: the design phase. Over the past two years, SAP has worked on a number of tools and enablement to do just this. We are now happy to make some of our resources available to the global community of software designers in Figma, a widely used design tool.

Access SAP's Accessibility Design Tools:

• Accessibility Design Tools annotation library available in the Figma Community
• Accessibility Design Tools plugin available in the Figma Community
• Accessibility Design Tools plugin code available open source on GitHub

Growing our inclusive experience mindset

Two central questions we asked ourselves as part of our journey to grow our inclusive experience mindset at SAP were: Where does accessibility break during the software creation? And how can we avoid this? To answer these questions, we started at the end of the product engineering cycle. After analyzing hundreds of product accessibility test reports, we found that many accessibility issues could have been avoided if we had more accessibility information available to our engineering teams as part of our design specifications.

Thus, the idea of the Accessibility Design Tools was born. The focus of the toolkit began with the basic requirements of the Web Content Accessibility Guidelines (WCAG) as a way to help designers annotate their design specifications with accessibility information. However, WCAG is our starting point, not our limit, as we aim to drive further product inclusion across the SAP product portfolio.

In a tight collaboration across SAP, we brought together the expertise of SAP's Software Accessibility and Inclusive Design Team along with the experience and working routines of SAP designers. The goal was to make accessibility guidance and all necessary considerations easily accessible for SAP's practitioners throughout the product design process.

We first piloted the Accessibility Design Tools within our product design community. In the second iteration, we incorporated the feedback of product accessibility experts and our global design community by adding more annotations, more guidance, and a set of plugins to make the process more efficient.

We are pleased to now offer the beta version of the Accessibility Design Tools to anyone building apps or products using SAP. Here are three key tools to help you make accessibility considerations part of your designs:

• The Accessibility Design Tools Handbook with insights and guidance on accessibility during the design phase.
• The Annotation Library to help in adding accessibility information for developers.
• The Accessibility Design Tools plugin for Figma to make annotating your designs for accessibility easy and efficient.

The Accessibility Design Tools Handbook

Accessibility needs to be a consideration—not a constraint—across all phases of the software creation process, including research, design, code, and test. This handbook is not intended to serve as a source to cover all those phases. It is specifically focused on providing guidance for the design phase. That does not mean that only designers benefit from its content, however. User Assistance Developers, product managers, and developers (to name few crucial roles), will benefit from its guidance as well. In order for the accessibility mindset to take hold, it requires input and collaboration from everyone involved in crafting the end user experience.

Download the Accessibility Design Tools Handbook

The Annotation Library

SAP created a set of annotations clustered into the below five topics. With this set of annotations, we address 59 of the 87 WCAG 2.2 success criteria.

• Foundation: All the basics for designing an efficient user experience, including input mechanisms, consistency, component names or design notes.
• Visual Design: Annotations for many WCAG requirements pertaining to the “perceivable” principle. This includes color contrast, text resizing, text spacing or responsiveness to name a few.
• Keyboard Support: The core of an intuitive and efficient interaction model and base for a great screen reader experience; includes annotations for the focus position (yes, think about the initial focus position), focus order, skipping groups and add short cuts.
• Screen Reader: Guidelines for key considerations for design specifications on screen readers. A good screen reader flow is the master class for each designer. Adding annotations like reading order, headings or landmarks helps to design an intuitive experience below the visual surface.
• Complementary Assets: Further topics like time limit, multimedia, or error prevention to round out the library.

Accessibility Design Tools Plugin for Figma

Annotating several screens and every UI element can be time-consuming. Using automated tools reduces the time burden and increases efficiency.

SAP created a Figma plugin set based on a subset of annotations assets:

• Screen reading order
• Focus order
• Landmarks
• Headings

This plugin is now available as beta for free and shared on Figma Community.

Explore and share!

We are excited to be part of the global movement for more digital access. Accessibility means life-long learning, exchange, and networking. Explore our Accessibility Design Tools and share your experience with us.

Share your questions and feedback with the team via email.