Using the Accessibility Checker in Visme

Visme’s Accessibility Checker helps you create inclusive and accessible designs for all audiences. This tool identifies issues related to text readability, alternative text for screen readers, and visual impairments, ensuring your projects meet accessibility standards.

The Accessibility Checker is available to all users and works with all project types. It checks:

– Color Contrast: Evaluates contrast levels and highlights objects with low contrast.

Note: It works with text, shapes, lines, and arrows but does not support animated icons.

– Text Size: Flags text smaller than 18 px, which might be hard to read.

– Alternative Text: Identifies objects missing descriptions for screen readers.

– Reading Order: Displays the sequence in which screen readers will interpret your design, allowing users to view and adjust the reading list.

– Visual Simulator: Let you view and adjust your design for various visual impairments.

Accessing the Accessibility Checker

Open the project you want to review. On the top-left corner of the screen, click the hamburger menu (☰).

From the dropdown, select Accessibility.

Click on Accessibility Checker. The Accessibility Checker panel will appear on the right-hand side of your screen, displaying three main options and if there are any issues to be fixed:

– Text Size

– Alternative Text

– Visual Simulator

Checking Color Contrast

The color contrast feature evaluates contrast levels and highlights objects with low contrast.

Open the Accessibility Checker panel and click on Color Contrast. A list of objects with low contrast will appear across the different slides.

Click on an object from the list to be redirected to its exact location in your project.

The Edit Menu will automatically appear, allowing you to adjust the object’s contrast to ensure better clarity and readability.

Checking Text Size

The Text Size feature ensures your text meets accessibility standards by identifying text smaller than 18 px.

In the Accessibility Checker panel, click Text Size. This will generate a list of all text elements that are smaller than 18 px, organized by slide.

Each listed issue includes a preview of the problematic text, and the slide it appears on. Click on an issue to be redirected to the exact location of the text in your project.

Select the text box on your slide and increase the font size to 18 px or larger ensuring the text remains visually balanced and aligned with your design.

Once you’ve increased the font size, return to the Accessibility Checker panel and the resolved issue will automatically disappear from the list.

Learn how to quickly change text format in Visme

Adding Alternative Text

Alternative text provides descriptions for objects that screen readers use to help visually impaired users understand your content.

In the Accessibility Checker panel, click Alternative Text. A list of objects missing alternative text will appear, organized by slide.

Locate an object listed as missing alternative text. Then, click the Add Alternative Text button beneath it.

A text box will appear where you can enter a description of the object. Provide a concise yet clear description (up to 250 characters).

If an object is purely decorative and does not contribute to the content, select the Mark as Decorative option. This excludes the object from requiring alternative text.

Click Save after adding descriptions or marking objects as decorative and the resolved items will disappear from the Alternative Text list.

Checking the Reading Order

The Reading Order displays the sequence in which screen readers will interpret your design, allowing users to view and adjust the reading list.

In the Accessibility Checker panel, select Reading Order to view the list of objects on the selected slide.

Click on an object in the list to navigate directly to its location in your project for adjustments.

To delete an object and make the screen reader skip it, simply click the trash bin icon on the right of the object in the list.

Using the Visual Simulator

The Visual Simulator helps you evaluate your design from the perspective of users with various visual impairments.

In the Accessibility Checker panel, click Visual Simulator. A list of filters representing different visual impairments will appear.

Click on a filter to see how your project looks through the selected lens. The simulator will apply the effect to the current slide.

Identify areas where the design is challenging to be viewed, such as low-contrast text or problematic color combinations. Return to the editor and modify colors, contrast, or other design elements for better visibility.