Designing Accessible Builder Apps

Global Accessibility Awareness Day (GAAD) highlights the importance of Digital Access and Inclusion for over 1 Billion People with Disabilities around the world. We enthusiastically celebrate GAAD at Salesforce because it directly speaks to our role in creating a more inclusive and just world. The World Health Organization defines Disability as

Notice that it doesn’t say people can’t do xyz because of a disability. People have impairments, but it’s their environment or products that disable them. Products are not impartial objects — as engineers, designers, and product managers, we control whether or not we exclude people with everyday decisions around how we design and build products. The real life outcomes of our decisions result in whether or not someone can order groceries online, talk with friends virtually, or access medical assistance.

In order to test out different patterns and do some user research, Lee and I created a basic prototype that was low fidelity enough to focus on the necessary areas. The goal wasn’t to create something designers should copy pixel by pixel but to create something that would demonstrate the recommended HTML and Keyboard interaction patterns. Also… we’re not designers. From user research and input from other Accessibility specialists, designers, and engineers, we iterated over the prototype a few times and landed on a guideline for our Builder teams to reference.

The first question when developing this was, “how do we communicate the overall layout of the app and efficiently move around?”

There are essentially four major regions:

We also wanted to allow for non-screen reader users to quickly navigate with the keyboard, so we added Cmd/Control + F6 to cycle between the four regions. It’s worth noting that Cmd/Control + F6 is used in Microsoft applications, Slack, and other industry leaders. Instead of being unique, our features should be intuitive and discoverable so following best practices from other companies’ apps was better than creating our own custom keyboard shortcut.

The next question was how to ensure every user could easily perform tasks using any input device. The key workflows in the Content Builder are adding a component to the Canvas, changing its position on the Canvas, and editing its properties in the Property Panel. With a mouse or other pointer device, a user could drag a component from the Component Panel to the Canvas, and drag components around on the Canvas to reorder them. How would this experience work with a keyboard or screen reader?

Some of our Content Builders allow for dragging multiple components onto the canvas at the same time, so we developed a compatible keyboard spec. To select multiple, pressing Space selects a component, and then Shift + Up/Down arrow keys selects the components directly above or below your currently selected item. To multi-select components not directly above or below, press Space on the first component, Up/Down arrow to the next desired component, Space again, and then Enter to add both of them to the canvas.

To move a component inside a sub-region of the canvas, you press Up/Down arrow keys. To move it to the next or previous sub-region, you press the Right/Left arrow keys. So in this example, we pressed the Right arrow key to move the component from the 1st sub-region (canvas header) to the 2nd sub-region (canvas main) and then the Down arrow key twice to move it to the 2nd position inside that sub-region. Notice that the aria-live instructions say, “Accordion moved, in the Main region. Current position 2 of 4.”

To drop the component in the desired spot, press Space. Notice that the visual “draggable” style goes away, and the aria-live instructions say, “Accordion dropped, in the Sidebar region. Current position 1 of 1.”

[Prototype with the Accordion component in the 1st position of the 3rd sub-region with no visual styling applied.]

The most common step after moving components around in the Canvas would be to edit their properties. With Cmd/Control + F6, it’s easy to jump from the Canvas to the Property Panel. Most of our properties are basic form fields (ie. inputs, radio buttons, etc), so we just followed the WCAG guidelines.

Lee and I worked with the team to develop several more HTML and keyboard interaction patterns for different flows and variants of the Content Builders, but above was the most common use case that helped stakeholders understand the basics.

Prototypes are fantastic tools to explore new ideas and show concepts to stakeholders, but accessibility needs to be in the product to have any real impact on our customers. The only way to achieve this is through strong partnerships with the entire product organization. The two UX Leads for the Builder Initiative are members of our Accessibility Champions program and prioritized accessibility with the entire group from the beginning. They also created a strong bridge between accessibility and engineering. Instead of Lee and myself working in a silo and handing off work, designers and engineers actively participated in sketching and collaborating with us in the exploration and discovery phrase.

Inclusive products are only created through an inclusive process. Collaboration with our designers, engineers, PMs, and users throughout the entire product development lifecycle filled in our knowledge and perspective gaps. In your own work, invite people from all disciplines as well as People with Disabilities to collaborate and lead explorations. Even if accessibility isn’t in their title, people bring their own expertise from different backgrounds and experiences which will always result in well-informed, innovative, and better products for everyone.

A huge thank you to Cliff Seal, Scott Pitkin, and Brady Sammons for bringing their accessibility passion and creativity to the UX side of the Builder Initiative. And thank you to Gary Frankel, Trey Washington, Don Roberston, and several others for embracing accessibility in their engineering practices and being active partners in developing a great user experience for all.

Related posts:

It is fairly safe to say, or potentially not, depending on whose reading this, that America is not a democracy. There will be many of you who read this and will no doubt have an arguement against…

In our conversation with Jabran, we explore their recent endeavor into the complete mapping of which T-cells bind to which antigens through the Antigen Map Project. We discuss how Jabran’s background…

Desde que me entendo por gente, gosto de ler. Comecei lendo gibis da Turma da Mônica e, depois, avancei para os romances policiais da Agatha Christie. No colégio, tive acesso aos clássicos e, por…