A plugin that brings accessibility right inside Figma and Sketch
How to use Adee’s comprehensive accessibility tool.
Based on a World bank organization report, one billion people (which is equal to 15% of the world’s population) experience some form of disability. However, designing for people suffering from different types of disability, such as colorblindness, can be easily forgotten because most designers aren’t colorblind. I created Adee free accessibility plugin for designers using Sketch and Figma, and in this article, I’m going to show you how to use the tool to make sure your design is inclusive. The topics covered in this article are including:
- Generating alt text
- Colorblind simulation
- Testing touch target size
- Checking color contrast
- Sharing with team
Alternative(alt) Text:
Alt attribute, commonly referred to as alt text, is an essential element of an accessible presence. Alt-text is important because:
- One of the main reasons alt text was created is to help people with visual impairments. If you don’t write alt text, some of the screen readers read the file name to the users and this could be the worst experience you can provide for Assistive Technology (AT) users on your website.
- If images fail to load on your website, users will be able to get some idea of what your web page is about by reading alt text.
- It will help search engines to understand what the image is about and to rank them in the image search results. According to google:
Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.
Adee alt text generator:
Not all web developers take the time to caption all their images. Adee free alt text generator is an easy to use tool for designers for creating and generating Alt text in Sketch and Figma and sharing it with developers in order to help their end users to understand what an image actually contains.
Here are the steps you need to follow:
1- Selecting an image/images:
There are a number of way you can choose images in the alt text section. A) select your intended image before opening Adee plugin B) select images from multi-selection field C) click on any image when the plugin is open and it will show up. You can only select 4 images at once.
2- Image format:
Since any shape created on the Figma environment is also considered as SVG, you can exclude this format from the selection menu to make your life easier if you are only using PNG/JPG image formats. In addition, in Adee when you select an image, it automatically detects and displays the format of the image whether it’s SVG, PNG or JPG.
2- Image type:
There are two types of images to consider when creating alternative text. These types are including decorative or informative. Informative images add important information to a page while decorative images don’t. At the end, this is a judgment that only the designer/author can make.
In order to edit image type in Adee, after selecting an image, click on edit icon, and from the drop-down menu choose your intended type of image. Your selection will determine the other fields display next.
And finally, some important points to remember:
- For SVG images, instead of alt text, you need to use description and title. Description: The <desc> element provides a longer human-readable description of the element that contains it. A description should be provided for complex SVG content, or where the SVG fulfils a particular function or purpose.
Title: The <title> element provides a short human-readable name for the element that contains it. At least one title should be provided for every SVG image. - Role=”img” attribute, describes the role of an element in programs that can make use of it, such as screen readers.
- aria-describedby property may be used to attach descriptive information to one or more elements through the use of an id reference list.
- alt=””. A “null” alt attribute is not the same as having no alt attribute. The purpose of this technique is to show how images (i.e. decorative images) can be marked so that they can be ignored by Assistive Technology.
At the end, save the information and generate and done!
Color Blindness:
According to Color Blind Awareness 4.5% of the population are color-blind. However, for male audiences, this can increase to 8%. Some types of colorblindness are such as Deuteranomaly that is a reduced sensitivity to green light and is the most common form of color blindness, Tritanomaly which is a reduced sensitivity to blue light and is extremely rare, or protanomaly, which is a reduced sensitivity to red light.
Adee colorblind simulator:
Designers often do not suffer from a color vision deficiency, so it is very hard for them to imagine how it looks like to be colorblind. Colorblind simulation tools can close this gap at the design stage and before coding. There are a number of great tools that designers can use and among them, Adee is a free plugin for Sketch, Figma, and soon for Adobe XD that you can use.
Here are the steps you need to follow:
1- Selecting frame/ artboard:
There are a number of ways to access layers/ frames/ artboards in the colorblind simulator. You can select your intended layer, then open Adee plugin, then wallah! it will show as a default selected layer. When the plugin is open, you can also navigate among layers live. You do not need to close or reload the plugin to update layers as it gets updated automatically.
2- Selecting colorblind modes:
There are several types of inherited colour blindness. In Adee Plugin you have access to 8 different modes of colorblindness.
3- Zoom and comparing modes:
When you are in the single view, you can use zoom to have a closer look to the details of your design and how colorblindness can impact your design and audiences.
After applying a mode, you can also select the double view to compare with normal view of your artboard/frame.
4- Generating frames/artboards:
With this feature, you will be able to select an artboard (or frame) and generate new artboards that reflect the different types of Colorblindness that you selected. In addition, the artboard’s elements are actually editable and you can go ahead and check the contrast ratio to make sure it’s still meeting AA or AAA criteria. You can then use free contrast checker, adjust your colors and apply changes to correct that primary color palette if it’s still not passing.
With generating as well as commenting and report functionalities , you and your team can preview, adjust, and export design and handoff to developers, or product managers when meeting with stakeholders.
Touch Target Size:
Why designing touch targets is challenging? Designers usually communicate their work using pixels (px) in tools such as Adobe XD, Figma and Sketch. However, px in design tools does not directly represent device resolution. For example, the touch size for Apple devices is different from Android devices. The recommended touch size for Apple device is 44pt and for Android devices is 48dp.
However for a designer what matters the most is whether the size of a button follows the UX and accessibility guidelines or not? So how we should know if our design meets standards when designing for touch screens without getting occupied with calculations and device specifications?
Adee touch target size checker:
In following, I’ll show you how you can test your touch target size (such as buttons, links, hotspots, etc) against various standards and make sure your design is accessible and meet recommendations and guidelines in 4 easy steps.
1- Selecting a device:
From the drop down menu, select a device you want to test your touch target size against it. There are a variety of devices based on what is typically available on the design tools such as Figma, Sketch and Adobe Xd. Currently, this list is divided in two categories of Android and Apple devices. It’s recommended to try various type of devices for testing your touch target size.
2- Select a touch target:
Your touch target could be a text link, button, image, icon or any shape in your design. Just keep in mind that in Sketch you also have access to hotspots. The hotspot layers should have unique names otherwise it will be confusing for you when selecting a hotspot from the drop-down list for testing.
3- Testing criteria:
You can show or hide the test criteria for the selected target. Adee provides you with information for the following criteria:
- Apple devices:
According to Apple developer guideline (Human Interface Guidelines), designers should try to maintain a minimum tappable area of 44pt × 44pt for all controls. - Android devices:
Android accessibility help recommends making touch targets at least
48 × 48dp. - Nielsen:
According to Nielsen group, designers should ensure that all interactive elements are at least 1cm × 1cm (0.4in × 0.4in) in physical rendered size. - WCAG:
According to WCAG, Section 2.5.5. Target Size (Level AAA), success criterion is defined as: The size of the target for pointer inputs is at least
44 × 44 CSS pixels. There are some exceptions you can find on WCAG website.
4- Interpreting results:
In summary, the image below shows what Adee touch target size checker shows once you select device and target from the lists, and what you can learn from the test results:
At the end, what you also need to consider is that touch targets consist of the area that responds to user inputs. Hence, touch targets extend beyond the visual bounds of an element: An element like an icon may appear to be
25px×25px but the padding surrounding it comprises the full 48px ×48px touch target.
Designing usable touch targets is the basis of all touchscreen (watch, tablet and mobile design) and all users benefit from larger touch targets. For very young users, or users with motor and/or vision impairments, this is even more important. Touch targets need to be large enough and have a large enough interactive target area to tap comfortably with one finger for all users. In order to test and set the size of the targets, we can use Adee touch size testing tool to make following the standards and guidelines accurate and hassle-free.
Color Contrast:
Providing enough contrast between text or graphics and their background helps users, specially people with moderately low vision (who do not use contrast-enhancing assistive technology), to read and see things effortlessly.
In the WCAG recommendation, the contrast is calculated in such a way that color is not a key factor so that people who have a color vision deficit will also have adequate contrast between the text or graphics and the background.
Adee comprehensive contrast checker:
Here is what you can do with Adee color contrast checker:
1- Live preview:
You can see how your design looks like live and as you adjust your colors.
2- Access to saved colors and color palette:
adjust your design colors by using color pallet and your saved colors (global colors).
3- Adjust design colors and apply changes:
Adjust your colors and then apply changes to your design when you are happy with the results! Also lightness slider helps you to make sure your product has enough contrast and is WCAG 2.0 accessible.
3- Swap colors, reset changes:
You can also swap foreground and background color in Adee plugin. Also if you don’t like changed colors you can rest to the original colors.
Comment, convert to a report, and sharing:
By sharing your test results with your team, stakeholders and managers, you can create awareness in your organization and among your teammates.
Many companies are waking up to the fact that embracing inclusive design and accessibility is leading to multiple benefits. These range from decreasing legal risks, strengthening brand presence as well as improving user experience. Adee sharing feature could help you with this purpose. After testing in sections such as color contrast, colorblind simulation or touch target size checker, select add to report button. Then you will be able to generate your test results and accessibility audit and share it with your team.
Wrapping up:
Designing for accessibility is not that hard! It’s always a good idea to talk and get feedback from your real users and the target audience you are designing for.
You can also try putting yourself in the same position as your users by using voice-over, keyboard navigation, or viewing content at different zoom levels.
These are all simple tools and methods of testing to get an idea of what someone experience when using assistive technology. Also most devices these days have accessibility settings such as magnifier, voice-over and contrast modifier which assist designers to understand user experience.
Design credits: https://www.figma.com/community/file/922923694852179640
