Using Alt-Text Annotations

Create and add beautifully crafted alt text descriptions to your images

We can’t rely on images to convey important information in our web pages, products, and designs. Ensuring that every image comes with alt text allows people dependent on assistive technologies, like screen readers and voice-over, to navigate the software and have a better digital experience.

Stark’s Alt-Text Annotations tool automatically checks your designs for alt text and suggests changes based on common mistakes, such as redundant information or emoji usage.

Using Alt-Text Annotations with Figma and Sketch plugins

Download: Stark for Figma, Stark for Sketch

Stark’s Alt-Text Annotations being used to add alt text to an image of a potted plant.

To use Alt-Text Annotations in your design tool, go to Plugins and choose Stark > Alt Text. Select an image layer in your design, choose whether you want to make alt text required, click Add, and write your alt text.

An alt text description written for “a healthy Peperomia obtusifolia plant with large, dark green leaves,” using Stark’s Alt-Text Annotations. — Alt Text done.png

Click Done to save it and see it displayed in your artboard.

An image that has been annotated using Stark’s Alt-Text Annotations and labeled as “written.”

Decorative Elements

If you have images or graphics in your design that don’t covey any important information and are meant to be decorative, you can skip adding alt text.

Click the checkbox in the annotation window to mark the image as decorative. You can also mark the image as decorative from the main menu by choosing Decorative from the drop-down menu next to the Add button before adding it to the list.

Errors

As you write, you’ll see alerts if you’re going against best practices. The plugin will surface the following:

Redundant prefixes: when you’ve included phrases like “picture of” at the beginning of your description
Emoji usage: when you’ve included an emoji in your description
Excessive emoji: when you’ve included 2 or more emoji in your description.
Repetitive emoji: when you’ve included 3 or more of the same emoji in your description
Character count: when your description exceeds the recommended character count. While longer alt text is sometimes necessary, it’s better to be concise

Using Alt-Text Annotations in your browser

Download: Stark for Brave, Stark for Chrome, Stark for Edge

Stark’s browser extension using Alt-Text Annotations to surface the alt text status of every image on a plant shops existing website.

To get started using Alt-Text Annotations, open Stark from your browser’s extension menu. After opening the tool, Stark automatically scans the live web page and lists out all the images it finds.

If the image has alt text written, it will be displayed. You can click into the image card, or just read the alt text at a glance.

Decorative images

Stark’s browser extension using Alt-Text Annotations to display and label an image as “decorative.”

If you’ve marked an image as decorative in the Stark plugin, alt="", then the extension will detect that no alt text is required and mark the image card accordingly.

Errors

Stark’s browser extension using Alt-Text Annotations to surface many different issues with existing alt text, such as “redundant info” and “emoji usage.”

Stark will also audit the quality of the alt text. If any copy goes against best practices, it will be flagged. The extension will surface the following:

Redundant prefixes: When you’ve included phrases like “picture of” at the beginning of your description
Emoji usage: when you’ve included an emoji in your description. Consider only using emoji's when the original image has emoji's, such as screenshots of tweets or text messages. Otherwise, screan readers will read every emoji, resulting in a bad experience
Excessive emoji: when you’ve included 2 or more emoji in your description
Repetitive emoji: when you’ve included 3 or more of the same emoji in your description
Character count: when your description exceeds the recommended character count. While longer alt text is sometimes necessary, it’s better to be concise

Using Alt-Text Annotations for Mac

Download: Stark for Mac

An opened Alt-Text issue card in Stark for Mac. The artboard is displayed, with the right side panel showing the image in question. There is a field under the image where the user can enter their alt-text description.

Alt-Text Annotations in Stark for Mac lets designers, developers, PM’s, or anyone else on your team quickly establish, review, and implement alt-text for the images in your designs. Having these annotations in one central place removes any uncertainty about when and where alt-text should be included.

Stark for Mac’s Tools menu, with the cursor hovering over Alt-Text.

To use Alt-Text Annotations in Stark for Mac:

Open an imported project
Choose a artboard
Choose Alt-Text from the right side panel.

Worth noting: Stark currently recognizes image layers and layers with image fills.

Adding alt-text to images

Stark for Mac displaying all of the alt-text issue cards in a project. One issue card is hovered on and the corresponding image is highlighted. — Selecting an issue card.png

If your file contains images, Stark will surface them and list them out, displaying issue cards for each instance, and labeling them as either “To-Do” or “Written.” To add alt-text to an image, select an issue card to open it up.

A dropdown menu below the alt-text issue image provides the options “Required (Default)” and “None.” The option “Required (Default)” is highlighted by a cursor.

When opening an issue card, Stark will present the image in question. Stark will also display a dropdown menu to change the status of the image, a text field for you to write your alt-text, and buttons for copying text or code.

For non-decorative images, the default setting will always be Required. This default setting means that alt-text needs to be added to the image. Enter your alt-text description in the field provided.

Decorative elements

A dropdown menu below the alt-text issue image provides the options “Required (Default)” and “None.” The option “None” is highlighted by a cursor.

If you have images or graphics in your design that don’t covey any important information and are meant to be decorative, you can select None from the dropdown menu options. This will resolve the issue and mark your image as Decorative.

Writing your alt-text

Enter your alt-text descriptions in the field below your image. Your alt-text descriptions will save while typing, so there’s no need to worry about losing your work. Once the alt-text is properly written, the issue card will be marked as “Written”, showing that alt-text has been added.

Errors

In the center of the image is a list of alt-text issue cards in Stark for Mac. Each issue card shows a different type of error that Stark will flag. Flanking this list on the left and right are individual examples of these errors.

As you write, you’ll see alerts if you’re going against best practices. Stark will surface the following and offer explanations for why to avoid these:

Keyword stuffing: when your description contains multiples of one word. This is a bad experience for screen readers and hurts your SEO.
Redundant prefixes: when you’ve included phrases like “picture of” at the beginning of your description. This is unnecessary.
Emoji usage: when you’ve included an emoji in your description. (Only consider using emoji’s when the original image has emojis and you are transcribing the content verbatim—such as an image of a tweet or a text message. Otherwise, screen readers will read each emoji, creating a bad experience
Excessive emoji: when you’ve included 2 or more emoji in your description
Repetitive emoji: when you’ve included 3 or more of the same emoji in your description
Character count: when your description exceeds the recommended character count. While longer alt text is sometimes necessary, it’s better to be concise

Exporting alt-text

An alt text issue with completed alt text. The Copy code menu is open and shows the option to copy the alt text in HTML, Swift, and Objective-C.

There are 2 ways to export your alt-text from Stark. The Copy text option will copy the text directly to your clipboard and the Copy code action lets you choose from HTML, Swift, or Objective-C.

Have any questions about using Alt-Text Annotations? Don’t hesitate to reach out to us at support@getstark.co or via the support bubble in the lower right corner of this page.