Fast company logo
|
advertisement

Include is a Figma plugin that helps designers build more accessible digital tools from the start.

eBay just created a shortcut for building accessible websites

[Image: Ebay]

BY Liz Stinson3 minute read

Digital technology has become more or less essential to participate in society, yet people with disabilities often say simple online tasks can still be more of a struggle than they should be. Much of that comes down to the way digital tools and websites are designed—it’s estimated that upwards of 98% of websites don’t offer accessible experiences for people with disabilities. 

For some tech companies accessibility is the focus of a new era of design. But for others, designing for accessibility is still a challenge, as it’s not fully integrated into product development processes or fully understood by designers and engineers who themselves lack firsthand experience with tools like a screen reader.

Today, eBay is launching a new open source tool called Include that aims to help designers take accessibility into account from the start of product development. Created as a plug-in for the popular cloud-based design tool Figma, Include can help designers and engineers from across the tech industry check their products for accessibility concerns like whether websites are compatible with screen readers, whether color schemes allow readability for people with low vision, and whether clickable elements are large enough to be clicked or tapped by people with motor skill impairments. 

A screenshot of the audit tool. A seller's front page is displayed and various areas are highlighted in magenta. To the side of the page is a checklist with two sections. The top section is titled "Images" and has a list of the images contained in the site, each image has an field called "purpose" with an option to be either decorative or informative, and there is a space to input alt text. All the images in this example are checked decorative. The second checklist is titled "designer checks" and the checklist reads: Landmarks, Headings, Reading order, alternative text, sufficient text color contrast, sufficient click target sizes, tex resizing documented, responsive reflow documented. All options are checked off.
[Image: Ebay]

“It’s kind of like getting a critique as you work in Figma,” says eBay VP and head of design Aaron Carámbula.

It’s far from the first tool to check online content and designs for accessibility concerns, but eBay product design lead Anna Zaremba says that by integrating with Figma and letting designers quickly review multiple accessibility considerations at any point in their work, Include enables its users to make accessibility a central part of the design process rather than a compliance checklist to run through late in a project.

“We can give the designer almost a whole palette of things they should be thinking about instead of one thing at a time,” she says. “They can kind of do it at different points in their workflow, as opposed to at the very end.”

An image of the mobile design audit process. A screenshot of the back end of a mobile sellers page, showing their 90 day sales total "four hundred and twenty two dollars, up five dollars and twenty nin cents or 3.5% from the prior period" a list of their auctions: "3,945 active, 5 sold, 231 unsold" a "list and item" button, and a task list as follows: "order paid, ship it now, 35 outstanding, send an offer to your buyers, 7 outstanding, promote these listings, 9 outstanding". To the right of this screenshot is the audit UI. There is a checklist with progress percentages for each category. The categories are: Landmarks, Headings, Reading Order, Alt text, Contrast, Touch Target, Text Resizing, Responsive reflow. The screenshot is currently on the Alt Text step, and the user is selecting whether images are decorative or informative, and adding alt text to the informative images.
[Image: Ebay]

Built over the course of a year by eBay’s Core Accessibility, Design, and Design Tech teams, Include also adds standardized annotations about accessibility considerations, like screen reader-friendly alternative text for images, as layers in Figma. There, they can be reviewed by designers and by engineers who are ultimately tasked with turning designs into code. 

Before Include, there wasn’t a standardized way within eBay for teams to communicate about accessibility, which sometimes resulted in prolonged conversations between designers and engineers about what exactly different notes meant. “There was a little bit more guesswork, and it kind of depended more on individual teams and how their process was,” Zaremba says. 

Include saves designers time by streamlining previously idiosyncratic processes, Zaremba says. For instance, the tool lets designers quickly scroll through the images in a layout to flag those that are informative, or contain visual information that can be expressed through a short phrase and read by a screen reader. The tool automatically generates annotations, which means there’s less time spent manually marking up images for engineers to parse. “I would literally draw boxes, draw arrows, and it was actually quite a lot of time that it took to produce that,” Zaremba says.

Accessibility has generally become more of a concern for the tech industry in recent years, with companies like Microsoft, Google, and Meta all pushing initiatives to make products more usable by people with disabilities. Zaremba says she expects Include, which is now available through eBay’s Github page, will help other companies more smoothly integrate accessibility into their own work. Include essentially arose from a grassroots effort within the company, she says, drawing feedback from across various teams at eBay, and she hopes it will continue to gain new functionality based on feedback and potentially code contributions from outside users.

“We saw in many different organizations they have similar problems,” she says. “Why not share it with the community so we can spread the good?”

Recognize your brand’s excellence by applying to this year’s Brands That Matter Awards before the early-rate deadline, May 3.

CoDesign Newsletter logo
The latest innovations in design brought to you every weekday.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Privacy Policy

Explore Topics