There is sometimes a fundamental gap between the engineering and design teams when creating a new product. Designers want their work to be accessible, but many of the available tools are cumbersome, confusing, and come with processes that aren’t well-defined. This can lead to designers delivering their work to engineers without fully baked accessibility, which in turn leads to developers having to shoehorn accessibility in at a later stage than would be ideal — or, unfortunately, being unaware of the need to include it at all.
As a solution, eBay’s Core Accessibility, Design, and Design Tech teams worked to craft a new plug-in for Figma, the popular web-based design tool. The plug-in is called Include, and its goal is to make accessibility annotation easy, smooth, and simple, to ensure that accessibility is a core part of the design experience, rather than something crammed in (and then bug-fixed) later.
Include has thoughtful, elegant solutions to these problems. A designer simply selects a frame for annotations, and then the plug-in presents a list of tactical steps to ensure that their design is available to all. It guides the designer through all those steps, which can be done in any order, explaining the reasoning for each suggestion throughout. For example, Include will create a list of images that the designer used in a mockup. If the designer marks an image as informative, the plugin will prompt them to include alt text — a catch that makes sure that screen readers can describe the image.
There are all sorts of additions to the plug-in that help to complete the steps. One of those additions: It automatically makes a copy of the design with text enlarged to 200%, so the designer can easily see where text may overflow, or where the design may break. That feature is hugely beneficial for designers to consider how their designs will look for those who enlarge the text on their devices.
A major consideration for us at eBay is making tools like this available to all. eBay takes open source very seriously, consistently contributing our work back to the community, and Include has been made with that in mind. It’s available to all, on Figma, which is a free service. And the code itself is open-source, available on Github for all to use. After all, how could we create an accessibility tool and not make it accessible to everyone?