ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
01 Collect

Adee: Designing for Inclusion Inside Figma and Adobe XD

Article by Awwwards in Resources & Tools -

Designing for people with different types of disability, can be easily forgotten by designers as accessibility tools are not integrated into design platforms like Figma, Sketch or Adobe XD.

Adee is an accessibility tool that works as an extension in Figma and Adobe XD to help designers to test and adjust color contrast, simulate various forms of colorblindness as well as two other newly developed features in Adee that I’ll talk about in this article - the AltText Generator and the Touch Target Size Checker.

Adee Alternative Text Generator:

Although the purpose of alt text is to improve accessibility by explaining what an image is to visitors of the web page who are using screen readers, it also assists search engine crawlers and SEO of your website. Failing to set alt attributes for images means that your website becomes difficult for screen readers and browsers to interpret, and reduces the user experience for visually impaired users [1].

Adee editor in Adobe XD
Figure 1- Adee alt text editor in Adobe XD

Adee alt text generator is an easy to use tool for designers to create and generate Alt text in Adobe XD and Figma and share it with developers. Here are the steps to follow in Adee to create alternative text:

1- Plugin installation

In Figma or Adobe Xd, install Adee from plugins marketplace and then open the Adee plugin from the plugin menu. When opening the Adee plugin, it always appears on the left side of the Adobe XD window.

Adee plugin in Figma app
Figure 2- Installation of Adee in Figma and finding it in the plugins marketplace

2- Selecting an image:

There are three ways to choose images in the alt text section. (You can only select 10 images at once.)

  1. Click on any image when the plugin is open and it will show  which is the easiest way
  2. Select your intended image before opening Adee plugin
  3. Select images from multi-selection field

How to select images in Adobe XD

Figure 3 - Selecting images live in Adobe XD and Adee environment

3- Defining Image format and type:

In Adee when an image is selected, it automatically detects and displays the format of the image whether it’s SVG, PNG or JPG. Overall, there are two types of images to consider when creating alternative text, including decorative or informative. Informative images add important information to your webpage while decorative images do not. In the end, this is a judgment that only the designer/author can make. However, Adee provides tooltips and guidance for designers to make a proper decision at each step.

Adee text generator panel
Figure 4- Different fields will be shown in Adee alt text tool based on entered information for each image

Based on the chosen image type and image format, Adee displays different fields and information to add to the image. For example, if an image format is SVG, instead of alt text you need to use description for longer human-readable description of the image/element and title for a short human-readable name for the image/element. In addition, Adee let designers communicate other considerations such as image role for use of screen readers, aria-describedby property and null alt text for decorative images.

4- Save and generate:

After filling in the fields and saving the information for each individual image, you can select the “generate” button in order to generate the information as a text document and share it with the relevant member of the team (developers, authors,...).

Tips for writing good alt text:

  • Don’t use words like “image of” or “graphic of”, screen readers already announce this. For example, instead of saying “image of Damavand mountain” just say “Damavand mountain”.
  • Consider maximum 125 characters for Alt text, maximum 64 characters for SVG image title, and maximum 125 characters for SVG image description.
  • Use correct grammar to help screen readers, such as capitalizing the first letter.
  • When describing a picture, you might sensibly and wisely use a top keyword or two: great. This will assist with your Search Engine Optimization. But only when done truthfully and sparingly [2].

Adee Touch Target Size Checker:

Designing touch targets (buttons, links, …) with a proper size and based on standards is difficult. This is mainly due to the fact that the way designers communicate their work in design tools (Pixel) does not directly represent device resolution. For instance, Apple devices, Android devices and even experts in the field, such as Nielsen, all have their own recommended touch target size, while at the same time there are so many screen sizes and resolutions.

Adee touch target size checker, does all these calculations and hides these details and complexity to simply let designers and developers concentrate on passing or failing in testing. Adee also gives suggestions on how to correct the errors and seamlessly apply them. Let’s see how to it in some simple steps:

Adee size checker in Adobe XD
Figure 5- Find Adee touch size checker in top menu in Adobe XD

1- Running the tool:

From the plugin menu select the touch size checker tool. Note the above image is for Adobe XD, however the plugin works the same for Sketch and Figma.

2- Device selection:

The list in this dropdown menu is divided into two categories: Android devices and Apple devices. Which is based on the type of artboards/ frames designers can create in design platforms such Figma or Adobe XD. If you want a precise test result you can test with various types of devices, but if you just need a rough estimate, when you select any of the devices, Adee provides this information in a table on top which I explain more in step 4.

Devices to test in Adobe XD
Figure 6- List of available devices to test touch target size against them in Adobe XD

3- Target selection:

This part is easy! You just need to select the target such as text link, button, shape or icon in your design. Just keep in mind that before opening the plugin you need to select the targets you want to show in the dropdown list.

4- Test results:

There are two tables showing. The table on the top shows if the chosen target could pass or fail the test based on different standards.

The second table, recommends minimum width and height for the selected target in order to meet the standards. Adee does all the calculations behind the scenes and demonstrates the results in Pixel again to make it easy for designers to modify their work accordingly.

Test results: recommended width and height
Figure 7- Test results and recommended width and height to meet standards

Wrapping up:

By taking some simple steps, using accessibility tools and getting feedback from end users, we can make digital products accessible and usable for all including those 15% of the world’s population with some form of disability [3]. These are all simple methods to get an idea of what someone experiences when using assistive technology.

About the Author

Samine is Phd student at School of Computer Science at the University of Sydney. Samine Created Adee in 2021 for Figma and Adobe XD. In this short period of time, Adee won Good design Award, ASSETS Conference Best Artefact award, and Adobe Design Fund.