Creating accessible images right inside design tools
How to use Adee alt text generator in Figma
Sometimes images are used to improve the appearance and aesthetics of a web page and sometimes they are used to convey important information in numerous contexts such as work or education. However, designing and implementing accessible images for people with different types of disability could be easily overlooked when there is not enough awareness and appropriate support tools.
Our approach in Adee is to integrate accessibility thinking into designers’ daily tools. In this article we talk about how to get started early and then introduce Adee’s alt text interface and the logic behind it for generating alternative text right in your design tool.
You need to get started early
Recently there has been some research done on the effects of reduction in defects Shift Left. For example, a case study by U.S. bank showed that by catching accessibility defects early, they could reduce accessibility issues detected in automated testing by 67% [1].
So, obviously, the most time and cost-effective way to ensure the quality of your digital product is to identify the defects earlier and avoid compliance and accessibility issues down the road.
However, not all web developers take the time to enhance accessibility of design related issues such as captioning all images. Therefore, it is important to encourage digital products designers to start thinking and designing with accessibility in mind from the earliest stages of the design process. Providing designers with a friction-less and seamless experience for identifying and tackling accessibility problems and making accessibility a habit as part of the flow of design can help to make it happen.
Adee accessibility tool:
Adee is an extension (plugin) that operates in various design platforms such as Adobe XD, Figma and Sketch. It can be accessed at Adee website (www.adee.co). Adee currently supports the following:
- a color contrast checker,
- colorblind simulator,
- touch target size checker,
- alternative text generator.
In this article our focus is on Adee’s alternative text generator that was recently redesigned and developed.
Adee Alternative Text Generator:
Defining image type:
For any image, you first need to define whether your image is decorative or informative and think about the purpose and context of your image. Ask yourself questions like:
- is the purpose of the image informing a user?
- is the image for improving the appearance of the site?
- or is its purpose to stand out a call-to-action button?
In the end, it is the author’s decision to identify which images are decorative and which are informative which might not be always an easy task.
In the following I explain different patterns and combinations of image types and formats that define Adee Alt text generator interface and logic. It is important to always keep in mind that you need to consider the context of the images. Of course, there are other various possible patterns to be used depending on the context and use cases, such as patterns that Carie Fisher outlines in her article [2]. In follow, we go through each of these formats and image types accordingly:
1- PNG or JPG image format:
- Decorative:
If an image format is PNG or JPG and its type is decorative, it requires an empty/null alternative text attribute. A null alt text is written as alt=”” with no space between the set of quotes.
This sends a signal to the assistive technology devices (ATs) to skip this image as it is not essential for understanding the content or taking any action on the page.
- Informative:
If an image format is PNG or JPG and its type is informative, you need to make sure you contain alternative information about the image. Alternative content requires to be meaningful and explanatory. The most popular screen readers cut off alt text at around 125 characters, so you should try not exceeding it [3]. In addition, make sure you avoid phrases like “image of” or “graphic of” to describe an image. A screen reader already tells the user this information.
2- Scalable Vector Graphics format:
- Decorative:
If the image format is SVG and its type is decorative, you need to include <title> element which provides an accessible, short-text description of any SVG container element or graphics element. Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip [4].
- Informative:
If the image format is SVG and its type is informative, you should extend your code and do something that performs the same magic as an alt attribute within an image.
First, you need to include <title> and aria-describedby. Using an aria-describedby means you’ll have to have one or more ids that describe something, in this case the SVG. Put an id on the <title> and maybe even add a description (<desc>) and give it an id as well. And finally, adding role=”img” helps assistive technologies to avoid confusions and recognize an element as an i.e., image or icon [5]
Wrapping up
Of course it is the responsibility of any web designer and developer to create ethical and inclusive digital products. But if you are still finding it difficult to persuade your managers and stakeholders to care about accessibility, you need to make them aware that it is estimated that companies without accessible sites are losing $6.9 billion a year to competitors whose sites are accessible for internet retailers alone [6]. So, they are missing a huge part of the society as their target market for their digital products. About 56.7 million Americans, around 80 million people in the European Union (EU) and 20% of Australians currently have some form of disability [7]. We hope that this work promotes accessible design in your business to make sure no one feels excluded.
References:
1-https://docplayer.net/215920291-A-year-in-review-accessibility-success-at-u-s-bank.html
2- https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/
3- https://moz.com/learn/seo/alt-text
4- https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title#attributes
5- https://a11y-101.com/development/svg
6-https://cdn2.hubspot.net/hubfs/153358/Nucleus-The%20Internet%20is%20unavailable.pdf
