Accessibility and inclusivity in practice
Content Designer Shay Perez and Senior Accessibility Specialist Scott Vinkle on creating equitable experiences
The Inside Shopify UX podcast is back for season two… both audibly and now, visually. Listen with your favorite podcast app or watch new episodes on YouTube.
Our host, UX Director Lola Oyelayo-Pearson, will be chatting with leaders and crafters on the Shopify UX team and will be asking questions like ‘has UX killed visual design?’ and ‘Is design an inclusive practice?’.
If you’re low on time or prefer reading, continue for the TL;DL.
In this episode, Lola Oyelayo-Pearson speaks with Shay Perez and Scott Vinkle about accessibility and inclusivity. Shay is a Content Designer on the Shopify Email team and Scott is a Senior Accessibility Specialist on the Flagship Themes team. Both are long-time Shopifolk. Shay has worked at Shopify for over six and half years and Scott for over four now after being a boomerang — meaning he worked at Shopify previously, left for a few years, and is now back.
Defining accessibility
Over time, definitions shift and change within the tech industry. To get started, Lola wants to hear from Shay and Scott about how they define and talk about accessibility in their own words. Shay says accessibility makes sure anyone who uses software has an equitable experience. She adds that inclusion takes that a step further, by making sure the software doesn’t other or exclude users by tokening or using ableist language. She believes accessibility and inclusion go hand in hand.
Scott shares a more technical definition and says “For me, accessibility is making a product accessible and usable by people with disabilities who rely on assistive technology.” He clarifies that there’s a difference between accessibility and usability. He says “I think where you can make something that’s technically accessible — people can get to it, use it, more or less understand it, but is it actually a good user experience? That’s the question, right? I think that’s where usability testing comes into play. I can work with my team to make something that’s technically accessible, but then we host usability sessions to make sure we’re actually implementing something that’s usable and delightful.”
If there’s a general understanding of what accessibility is and why it’s important, people would react differently, with an understanding and empathy to the problem rather than indifference or pushback.
Lola believes we’ve come a long way in normalizing usability. It’s clear that better products with better user experiences, do better overall. And for most teams, it’s second nature to design with usability in mind. She asks why this isn’t the case for accessibility. Why is it harder to put into practice? Scott believes people really need to understand more about disability and accessibility. He says, “If there’s a general understanding of what accessibility is and why it’s important, people would react differently, with an understanding and empathy to the problem rather than indifference or pushback.”
Taking practical action
Content design guidelines for accessibility and inclusivity
Recently, Shay and her team released content design guidelines for accessibility and inclusivity. These guidelines are used by anyone that’s writing merchant-facing content, aka any copy our merchants will see when using our platform. The goal of the guidelines is to help the team avoid using racist, gendered, or ablest language. There are two parts to the guidelines, the conceptual and the tactical. The conceptual part of the guidelines explains what they are and why they’re important at a high level. The tactical part of the guidelines includes word lists, terms to avoid, and alternatives. She explains, “Hopefully if you’re kind of stuck in going like, ‘Oh, I know I shouldn’t say blacklist, but like what should I say instead?’ or ‘Is that true? Should I say that?’ You can just quickly do a little command F search and you can find the answer.”
Shay believes a lot of people that care about usability, accessibility, and inclusion at the foundational level, but they don’t know how to get started. And with these content design guidelines, they’re helping people take practical action.
The inclusive design workflow
Scott has pioneered a process with the Flagship Themes team called the inclusive design workflow, which addresses accessibility and inclusive design as early as possible. The inclusive design workflow starts with design. Before developer handoff, a designer will ping Scott for a design review in Figma. Scott uses the A11y Annotation Kit, a Figma Community file, to provide feedback and notes on HTML elements, attributes, states, properties, DOM structure, color contrast issues, custom focus or hover states, and more.
When he’s done with those annotations, he’ll pass it back to the designer who will hand it off to the developer. The Figma file with annotations and notes serves as an accessibility specification for that component. Once the developer is done writing the code and determines it’s ready for testing, they’ll ping Scott again to review their PR in GitHub. Scott then tests the code using a combination of automated and manual processes that looks at various screen readers on desktop and mobile, voice dictation, and screen magnification software. If the component is particularly dynamic or complex, he will set up usability test sessions on Fable. Once the component is in good shape, the team can ship it.
So far the inclusive design workflow is working well. Scott explains, “Why it’s working so well is that everyone on this team, Flagship Themes, from the designers, the developers, to our leads, they understand why accessibility is important. They know who I am, why I’m on the team and they trust my recommendations.”
Scott is working to scale this model to other teams by hiring more accessibility specialists and working on internal training material based on team-specific product areas.
Measuring accessibility and inclusivity
So how can you measure how your organization is doing with accessibility so that you know where you can improve? There’s a framework called the Accessibility Maturity Model. Scott suggests a few resources to explore including Level Access’s Digital Accessibility Maturity Model and Microsoft’s Accessibility Evolution Model. He also breaks down the basic accessibility maturity model:
Accessibility Maturity Model
Level 1: Initiating
- At this level, you’re just starting the conversation within your organization about the importance of accessibility. Your efforts are usually ad hoc or volunteer based and not well documented.
Level 2: Establishing
- At this level, your company is committed to accessibility, either via public statements or policy page. You’re still getting started, but you’re putting practices and processes in place. Examples may include things like adding accessibility to individual workflows, taking the time to create an inclusive workflow for a team, or creating training materials.
Level 3: Scaling
- At the top level, you’ve established processes and practices in place for digital accessibility and you’re working to scale them to other areas of the organization. At this level, you’re sharing widely and making the practices repeatable across the organization.
When Shay thinks about measuring accessibility and inclusivity she says, “To me it’s how do we measure anything we do in UX? We talk a lot about quality bars. We talk about beautiful designs and a lot of standards. Accessibility is that to me, its part and parcel of it. There can’t be a beautiful, usable, exciting, gorgeous product experience or a good user experience without accessibility and inclusion.” Scott adds, “There’s a big myth out there that people think you can’t have a beautiful design and not have accessibility at the same time. Completely untrue. We are throwing that out the window every day on the Flagship Themes Team. These themes are looking gorgeous and, by the way, they’re also very highly accessible.”
There can’t be a beautiful, usable, exciting, gorgeous product experience or a good user experience without accessibility and inclusion.
Looking to the future
So what does an ideal future look like when it comes to integrating accessibility and inclusivity into workflows? Scott believes that an ideal future means there isn’t an accessibility specialist needed on the team because designers, developers, and content writers have all the knowledge they need about accessibility and can build it into their workflow by default. Lola agrees that everyone on the team should have more accessibility knowledge and skills, but she doesn’t believe in unicorns. She says, “I think tooling gets better and people’s range expands and we can all do a little bit more stuff. But if you really care about something, sometimes you need somebody whose job it is to really optimize for that thing. And I think there’s always a danger, like, when a thing becomes everybody’s job, it becomes nobody’s job. And maybe that’s part of the challenge, right?”
Even if designers, developers, and content designers become more successful at adding accessibility and inclusivity to their workflows, there is plenty for accessibility specialists to do. Scott says, “Accessibility is so big, that to be embedded in this community and to keep up with the technology and to know all the little tiny nuances that I’m experiencing, as I read the blogs, as I go to community events, when I attend conferences, it is a full-time job to keep up with this industry in itself.” Shay compares the need for accessibility specialists to the experience she’s had with knowledge management, “Similar to knowledge management, I can spin up an internal document that shares the knowledge that I have, but there’s still always going to be that knowledge management expert, who’s going to help me with, ‘Where should it live,’ and, ‘How should I socialize it?’ And what’s the best way to do it and can answer my questions.”
Upleveling your accessibility and inclusivity knowledge is good for everyone. Lola says, “So like everything else, the quality bar goes up, the floor goes up about the minimum accessible standard. And then the quality bar gets held higher about, well, what is that other level that we could go to that would be valuable for the widest merchant population that we can support. That’s the holy grail scenario.”
Applying a lens of accessibility and inclusivity to everything we do helps us create more equitable experiences for everyone.
Extra credit
Want to dig in more on the topics discussed in this episode?
- Lola Oyelayo-Pearson
- Shay Perez
- Scott Vinkle
- Derek Featherstone — A speaker, teacher, and author on all things accessibility and inclusive design
- Polaris content design guidelines: Accessible and inclusive language
- How to create accessible and inclusive product content guidelines by Shay Perez
- A11y Annotation Kit — Figma Community file by the Indeed design team
- Fable — An accessibility platform for user testing and research powered by people with disabilities
- Level Access’s Digital Accessibility Maturity Model
- Microsoft’s Accessibility Evolution Model
- Read the full transcript
