Image Annotations

Graphics play a vital part in conveying complex information in an easy-to-understand format.

And the BBC broadcasts in more than 40 languages. Recreating shared content for key global events in each of these languages involves a lot of time and effort.

In a high-paced news environment, it is not always feasible or desirable to dedicate a graphic designer to straightforward tasks, such as adding a simple circle to an image or changing the text in a graphic from one language to another. Requests for such tasks compete with (and often lose out to) complex and higher profile commissions, meaning that stories that may benefit from graphics do not have them.

The team set out to test the hypothesis that by supporting scalable formats such as Scalable Vector Graphics (SVGs) and equipping journalists to create basic designs, we can ease day-to-day graphics workflows.

We identified image annotation as a small enough test case which could give us

• a prototype with basic design components
• SVG output, to test end-to-end scalable delivery
• an opportunity to explore better practices with metadata

We built the tool as a ReactJS component. It allows a background image to be imported, and enables simple annotations to be added on top of the background image.

The resulting annotated content is compatible with the BBC’s digital authoring system. Alternatively, the output can be exported as a flat image in a choice of image formats, including PNG, JPG, etc.

Working with the BBC’s design department, we agreed on a limited set of styling options that align with the BBC News style guide.

The tool allows journalists to easily add simple annotations to SVGs and publish them in articles, without requiring any specific design training or skills.

It enables journalists to add annotations to highlight or identify key components

• without having to use a licensed third party tool
• in World Service languages and fonts
• as defined by BBC style guidelines
• which can be saved as .svg files, as well as other raster image formats
• involving metadata for screen readers and search engines

The tool is not intended for more complex use cases, such as infographics with a hierarchy of design components.

 The optimal experience

It was important not to create an additional workload for editorial teams, and so the tool was designed to exist within the BBC’s digital authoring system, which is used for article creation. Copying the image block in the system, we added a new block called SVGs. We expanded the options to "Edit", with additional features to add shapes, labels, or text to an image.

In this way, journalists are able to annotate images in the same environment they use to edit the rest of the article. They can preview the article along with the SVG in the same process.

 Accessibility considerations

Screen readers are not able to read text that is part of rasterised images — words are a collection of pixels, rather than machine readable letters. We should therefore avoid having text placed in images, as it creates accessibility barriers for users of screen readers. Images should always be supported by metadata in the form of “alternative text”.

With this tool, by publishing the SVGs to the articles, the text elements are no longer merged with the image, but sit as elements on top of the image backgrounds, and are still "readable". This offers the opportunity to explore whether we are able to create more accessible images and graphics.

Next steps

We are sharing this tool with a small set of users to obtain feedback about usefulness, efficiency and potential. The next steps involve exploring animated SVGs and standardising metadata creation and use.