eBay creates accessibility tool for designers and engineers

eBay has developed a new accessibility tool called Include that aims to help designers and engineers generate accessibility annotations that can be built into products.

Accessibility annotations are notes on a wireframe to provide information and behaviour specific to accessibility – such as how screen readers will announce an interactive element. The project began last summer as “a grassroots effort” after the eBay team identified an industry-wide gap in how teams think about accessibility during the design process, according to eBay’s senior design lead ​​Anna Zaremba. Initially, the goal was to simplify the annotation process to reduce manual labour and improve how designers consider accessibility.

Zaremba says that there are several risks attached to not thinking about accessibility early on, including a greater reliance on “how engineers develop the product versus how designers intend the customers to experience the product”. The result of this could be that engineers guess at what the desired experience is, which might not align with the designer’s intentions. The tool can also help reduce the back-and-forth between engineers and designers as it will reduce the number of bugs in the code, she explains.

During a workshop comprising various eBay teams, four desired outcomes of the tool were selected: reducing information overwhelm, increasing confidence in accessibility, maximising clarity and efficiency when collaborating with engineers and maximising benefits from using eBay Design System components.

Though there are existing design tools that try to increase accessibility, many seem to focus on one or two specific topics, according to Zaremba. To fill in the gaps, eBay wanted to incorporate “a fairly comprehensive set of common and foundational aspects”, she says.

“A manageable list of tactical steps”

Include gives “easy-to-follow steps”, to help designers focus on the experience outcome and “increase their confidence about what is expected from a design accessibility spec”, says Zaremba. For engineers, it provides them with more guidance on implementation via output annotations.

After designers have selected a frame for annotations, Zaremba says they receive “a manageable list of tactical steps” related to accessibility concepts. Work can be saved and revisited, and the steps can be completed in any order. Each step also comes with tips to aid them further.

Zaremba says that the eBay team implemented “logic” in a bid to prevent common mistakes, and some manual tasks have been automated “to illustrate a concept”, explaining the accessibility need to designers, then “quickly showing them how the current design is affected”.

For example, the plugin might create a copy of the design with text enlarged by 200%. Then the designer can see where there might be issues with “wrapping text or truncation”, says Zaremba, and consequently respond by “defining the overflow behaviour without the need to recreate that page with larger font”.

The eBay team included visual cues where possible to make the content “more intuitive to designers”, Zaremba adds.

“A thread connecting intent and implementation”

The improved annotation process and clear instructions are meant to alleviate information overload for both designers and engineers, providing “a common language between design and development” while not overwhelming designers with too much technical detail, says Zaremba. She describes the annotations as “a thread connecting design intent and implementation”.

The biggest challenge, says Zaremba, was ensuring “the right balance of guiding”, while keeping the experience streamlined enough for regular use. eBay carried out multiple user interviews with designers and engineers who lack in accessibility experience in an effort to make the steps and output “as intuitive and relatable as possible”, she adds.

Another challenge was to account for designers’ diverse ways of working and organising design files. Zaremba uses a scenario where designers add multiple image layers to quickly preview options but might “not delete the unnecessary layers” if working fast. Zaremba says that the plugin ignores all the additional layers “to make annotation for alt text faster and focused on the images that matter”.

“eBay exists for economic opportunity”

Zaremba says: “We need to build tools like this to raise the bar of our day-to-day work and create time for designers to design efficiently to create magical experiences for our customers.”

She adds that “eBay exists for economic opportunity”, and places accessibility as one of its core goals. eBay customers expect to be presented with a more usable, predictable, understandable and easy-to-use experience and may need or want to use “assistive technology like a screen reader, magnifying the font-size, only using a keyboard, or zooming in/out as needed”, says Zaremba.

As it was also important that the tool be open-source, it was created as a plugin for web-based interface design programme Figma, which is a free service, while its code is available on GitHub.