By signing up you accept the Terms of Service and Privacy Policy
Diversity & Inclusion

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.


How These Companies Are Celebrating Asian American and Pacific Islander Heritage Month

According to a recent study, anti-Asian hate crimes have risen 150% since the pandemic started. But these acts of violence are not new — they are part of a much larger history of anti-Asian racism and violence in the U.S.

That makes celebrating Asian American and Pacific Islander Heritage Month (which was named a month-long celebration in May by Congress in 1992 "to coincide with two important milestones in Asian/Pacific American history: the arrival in the United States of the first Japanese immigrants on May 7, 1843 and contributions of Chinese workers to the building of the transcontinental railroad, completed May 10, 1869") this year all the more important.


How Relativity’s Monika Wąż Conquered Fear to Find Her Dream Career

There's a phrase in her native Polish that Monika Wąż reminds herself of each day: "If you don't learn, you're just going backward."

The Associate Product Manager at legal and compliance technology company Relativity says she would believe in a growth-centered approach to work even if she wasn't in the tech field, but that it's especially important because she is.

Autodesk, Inc.

How Embracing What She Doesn’t Know Led Autodesk’s Arezoo Riahi to a Fulfilling Career in DEI

Arezoo Riahi isn't a big fan of the "fake it till you make it" approach. She'd rather ask for the help she needs and learn from it.

Autodesk's Director of Diversity and Belonging joined the design software company from the nonprofit world after a long career in connecting people from different cultures. While her work had been deeply rooted in DEI values, there were certain parts of the strategy-building aspects to her new role that she wasn't sure about.

"If you know it, show up like you know it. If you don't know it, you shouldn't fake it. And Autodesk didn't shame me for not knowing everything. They helped me, and the entire team, by providing the resources that we needed, bringing in outside expertise to help teach us when we were in new territory," says Arezoo, who has been at Autodesk for three years now, during which she's been promoted twice into her current role.

We sat down with Arezoo to hear more about her path into DEI work, what she thinks the future of that work must include, and what advice she has for women looking to build fulfilling careers, from knowing what you don't know and beyond.


Behind-the-Scenes: Sales Interview Process at LogMeIn

Get an inside look at the interview process for sales roles at LogMeIn, one of the largest SaaS companies providing remote work technology, from Michael Gagnon, Senior Manager of Corporate Account Executive Sales.

Procore Technologies Inc

How Being an Open Member of the LGBTQIA+ Community Has Helped Procore’s Alex Zinik Overcome Imposter Syndrome at Work

Alex Zinik wasn't surprised that she started her career in education—she decided she would become a teacher when she was just in third grade.

She was surprised while working as a paraeducator in the school system and preparing to become a special education teacher, she discovered that it didn't feel quite right. "I didn't know if that's what I really wanted to do," she recalls.

So a friend suggested she take a job during her off summers at construction software company Procore. She thought this would be the perfect opportunity to try out this new challenge, and if she needed to, she could go back to the school district once the summer was over.

"Five summers later, I'm still here!" she says, smiling. "And I see myself here for many more years. I just fell in love with the company, the culture, and with the career growth opportunities I was presented with."

As part of our Pride month celebrations, Alex, currently the Senior Executive Assistant to the CEO at Procore, sat down with us to share how a common fear—the fear of being found out—underlay the imposter syndrome she felt when pivoting to an industry in which she lacked experience, and the anxiety she often felt before coming out to her friends and family about her sexuality.

Read on for her insight on overcoming negative thought patterns, being yourself, and paying it forward.

© Rebelmouse 2020