Creating accessible images right inside design tools

Adee colorblind simulator interface and comparing to views of the original image and the simulated image
Adee accessibility tool, colorblind simulator in Figma

You need to get started early

Adee accessibility tool:

Adee touch target size checker for devices like Large or small touch devices, iPad, Iphone and more.
Adee touch target size checker to test size of buttons and other interactive elements
  • a color contrast checker,
  • colorblind simulator,
  • touch target size checker,
  • alternative text generator.

Adee Alternative Text Generator:

Defining image type:

  • 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?
Adee plugin in the Figma environment and selecting image type as informative or decorative
Defining image type in Adee alt text generator

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.
Adee plugin in the Figma environment for a sample png image and decorative type
Adee Alt text for decorative type and PNG/JPG format
  • 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.
Adee plugin in the Figma environment for an informative type of image and png format
Adee Alt text for informative type and PNG/JPG format

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].
Adee plugin in the Figma environment for an icon with SVG format and decorative type
Adee Alt text for decorative type and SVG format
  • 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]
Adee plugin in the Figma environment generating alt text for an informative image type and SVG format
Adee Alt text for informative type and SVG format

Wrapping up

References:

--

--

--

Computer Science PhD Student at The University of Sydney

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
samine hadadi

samine hadadi

Computer Science PhD Student at The University of Sydney

More from Medium

How to Design for Accessibility? — Design for All

Ironhack’s Prework:[Narges Sayad-Manesh]_Challenge1

Usability Testing — What, How, and Why

Designing Accessibility for All

The article’s cover reads ‘Accessibility’ in braille and ASL letters.