GET EMAIL UPDATES FROM POWERTOFLY
By signing up you accept the Terms of Service and Privacy Policy
BROWSE CATEGORIES
GET EMAIL UPDATES FROM POWERTOFLY
Quip

What Accessible Design and Engineering Look Like at Quip (With 6 Tips for Your Company)

Christina Xu has long been interested in accessible design. As the product manager for the Accessibility (A11y) team at real-time collaboration software company Quip, it's more than just a passing fascination—it's a key part of her job.


Because Quip makes collaboration tools that are designed to empower people to work effectively together, says Christina, it's vital that those tools are designed to be used by everyone. "If an employee can't use our tools, it affects their ability to do their jobs, to get updates, respond to coworkers, participate in projects, or share their ideas," says Christina.

"I'm constantly thinking about who technology empowers, who it disables, and who gets to make those decisions," she adds, sharing that accessibility became even more important to her when her partner was diagnosed with a chronic illness. "Basic computer interactions like sitting at a desktop and using a mouse, or tapping text messages out on a phone, [can be] very painful [for them]. Watching them explore different tools and assistive technologies to make those experiences a little easier is a constant reminder of the importance of this work."

Christina's team has worked on several accessibility projects over the last few months, including Dark/High Contrast mode, designed for low-vision users and also a popular feature in general. We interviewed Christina along with three product engineers she works with—Tommy Vo, Joyce Zhu, and Ben Cronin—about their experience on that project and what they've learned about accessible product design and engineering.

Impactful work that's intellectually challenging

Ben has a very close friend, Laura, who has been blind for most of her life. "Her story has really shaped my understanding of what it means for someone to be 'disabled,'" he explains. "The fact that she cannot see may profoundly change the way she experiences the world, but it does not make her incapable of participating in and contributing to it." Working on accessibility projects makes Ben feel like he's creating a more even playing field for people like Laura.

But Ben's not in this work just for that rewarding feeling (though he does enjoy it). He also finds engineering for accessibility an intellectually stimulating problem. "I like the challenge of developing different frameworks for conveying all the information and enabling all the functionality that someone needs to successfully interact with a complex app," he says.

Tommy, who has worked on A11y features at Quip for other projects like their Navigation Redesign and Message Composer, agrees: "Accessibility teaches me to tackle problems logically and helps me learn new things about the web and assistive technology every day," he says. "For example, nothing grinds my gears more than discovering different behavior of HTML elements across browsers, yet I love learning about caveats like that and could spend hours researching in my own time."

Tommy also likes how clear-cut the wins are in accessible design. "Versus other UX projects where it might be hard to define success, it is often easy for me to tell whether an accessibility feature is satisfactory or not," he says. "Can our customers use it? Does it pass the defined ARIA standard or not?"

Joyce is a big personal fan of Dark/High Contrast mode and long wished she could use it on the products she works on every day. "When we had enough engineers to staff a full-time accessibility team, I was eager to do a technical investigation into how to create robust dark and high-contrast themes," she says.

Christina maps out the steps towards making Dark/High Contrast mode a reality, highlighting the complex engineering and design problems that had to be carefully solved before bringing the much-requested feature to life:

  • "Tommy had to implement semantic colors for all of Quip. This means that instead of designers specifying that a button is a certain shade of blue in the code, they would instead specify that a button is 'button-colored,' and we would then render a precise color based on whether Quip was in Light, Dark, or High Contrast mode.
  • Then, our designers came up with a formula to translate colors into these two modes.
  • After that, it took many eyes and a long time to painstakingly identify all the edge cases where that translation didn't look quite right and adjust it, sometimes with the help of other teams at Quip."

Ben highlights how accessibility best practices are well-aligned with engineering best practices. "Small, time-consuming changes tend to be more effective than large, quick ones. In that vein, one of the most satisfying (if least technically impressive) changes I worked on was making a few minor tweaks to the ARIA markup for the main navigation structure of Quip; from what I've heard, just those small changes made it much easier for screen reader users to understand the general layout of the app," he says.

Making accessibility a priority

When we interviewed the A11y team at Quip, we asked them what they wished other PMs, designers, and engineers knew about the importance of designing with accessibility in mind. They gave lots of great tips, and we've rounded those up in the next section for you. But there was one major takeaway that each of them kept coming back to: how vital it is that accessibility is part of a product roadmap from the very beginning.

"Always plan ahead when it comes to design with accessibility in mind, even before coding," says Tommy. "It usually reveals a pattern or behavior of your product that is easily overlooked and could be costly to address if realized later on."

"Accessible design and engineering is actually best and easiest when done at the beginning of the feature implementation process, instead of being bolted on as an additional launch readiness checklist item," agrees Joyce.

Try to see a focus on accessibility as an opportunity, says Christina. "If you view accessibility as a burden or a checklist that you have to slog through at the end of the project, it will feel that way. But if you treat accessibility as a core constraint to consider at the very beginning of your project, it can be such a clarifying and powerful tool," she says.

6 ways to make your product design more accessible

1. Make no assumptions.

"If a design assumes that someone is able to process information visually on different parts of the page at the same time, or that they can precisely maneuver a mouse cursor, there's a pretty good chance that most users will have a suboptimal experience," says Ben.

2. Try it out yourself.

Joyce suggests that other engineers try navigating their products the way that users with different impairments might in order to get a small taste of what they're solving for. "Try using only your keyboard to navigate your site, turning on one of the many browser extensions which emulate color-blind vision and trying to get around using a screenreader—no looking at your monitor! You might be surprised at what affordances you wish you were able to use."

3. Go beyond just being empathetic.

Christina learned something from her background in qualitative research that she thinks about constantly with her accessibility work: "Your own imagination is full of assumptions and biases that are almost certainly wrong."

"Our team works very closely with some wonderful accessibility consultants (Prime Access Consulting) who are blind and low-vision themselves, and their real lived experiences help check any well-intentioned but wrong instincts," she adds.

4. Create a framework for prioritizing features.

Christina asks four questions of potential accessibility projects before deciding which to start with:

  • How severe is the issue for people who are impacted by it? Is it annoying, confusing/disorienting, or fully disabling?
  • How widely used or fundamental is the feature or surface that the issue is occurring on?
  • Is there a workaround to the issue or not?
  • What size and complexity of project is my team realistically able to handle at the time?

5. Plan carefully.

This one is true for most engineering projects, but worth highlighting here. Tommy shares that he spent a full week not even coding but rather focusing on writing up a detailed roadmap as to how their team would deliver the Dark/High Contrast mode to their organization, company, and public users. "Setting up expectations early really helps me and my team understand the project's scope, making sure we're on top of things and avoiding potential crunch along the way," he says.

6. Recognize that there's a lack of documentation around accessible design best practices—and contribute to it when you can.

Ben has found that while some resources exist, nuanced conventions—"That 'aria-label' should only be used with certain types of elements, or that 'aria-disabled' works slightly differently from 'disabled' depending on the element it's applied to," he provides as an example—are hard to find. Their team has gotten around that by working with their consultants and doing a lot of trial and error, and they're working to document what they've learned. "That [way], the broader Quip team can get a better understanding of a11y do's and don't's that go beyond the specs," he says.

To learn more about Quip and their open roles, go here.

Automattic

27 Companies with Impressive Mentorship Opportunities

January is National Mentorship Month— the perfect time to focus on growing and building important relationships with mentors that will positively affect your professional career.

Research shows that mentorship greatly improves career outcomes by providing professional guidance, skill development, and support through major work and life transitions.

READ MORE AND DISCUSS Show less
Client

Best Tips for your Interview with CallRail - Get Ready to Apply!

💎 Looking for some tips and tricks to prepare for your job interview with CallRail? You’ve come to the right place! Make sure to watch the video until the end for some valuable insights.

📼 Watch this video to get some tips that will help you prepare for your interview with CallRail. In this video, you’ll meet Kristin Marsicano, Director of Engineering, and Jon Cyprian, Talent Acquisition Manager at CallRail, who will tell you about the application process and give you some tips and tricks to crush the interview!

READ MORE AND DISCUSS Show less
Uber

Top Tips For a Technical Interview with Uber

💎 Get some top tips before your technical interview with Uber! Don’t miss the valuable advice from a company recruiter. And get to the end of the video for the most important tip!

📼 Play this video to get three top tips that will help you ace your technical interview with Uber. You'll hear from Kelly Hay, Senior Technical Recruiter at Uber, who shares everything you need to know if you’re aiming for a technical role with the company.

READ MORE AND DISCUSS Show less
Client

An Inside Look at the World of Pre-Sales with Skedulo’s Cehrin Elyas

Cehrin Elyas spends a few hours each week with the imaginary characters she’s dreamed up. One of them is Donald, a 55-year-old man with dementia. Another is Mia, a support worker who cares for people like Donald and regularly takes him to get coffee or lunch.

Cehrin works in pre-sales at scheduling platform Skedulo, and Donald and Mia are two of the personas she’s built to help her understand her prospective clients. “I think of them like movie characters,” she says. “I put in lots of data relevant to the industries I’m pitching.”

READ MORE AND DISCUSS Show less

© Rebelmouse 2020