Writing with visuals
Language is not the only means of communication. By thinking and writing as if visuals don’t exist in an experience, you help the greatest number of people get your message.
Table of contents#
Guidelines#
UX writing never stands alone. Think and write as if visuals don’t exist, and never rely on images as the sole way to communicate a concept. Advocate for images that show more types of people and content that speaks to broader groups.
Be especially mindful of what’s portrayed as typical. For example, when the text refers to “experts,” are the accompanying images only of white people? When the text refers to “learning, building on skills, educating,” are the images only of people of color?
Try different ways of organizing information#
Organize thoughts chronologically, not spatially. If interfaces are organized around time instead of position (e.g., “before” and “after” instead of “above” and “below”), it alleviates a major pain point for people with visual impairments who rely on screen readers (audio or braille devices) or magnifiers (for example, an interface may be too zoomed-in for it to be apparent that person is in a modal). Doing this also avoids confusion for people with learning disabilities that make it hard to understand directional language.
Create content that can be presented in different ways without losing information or structure, sometimes called “modular content.” Perhaps the layout can be simplified, or the order of content can be switched around.
Take this hands-on tutorial now.
[ Start ]
This is modular content; all the content pieces could stand alone or be rearranged.
Or are you ready to dig in? How about both?
[ Start tutorial / Go back ]
This is more traditional content; the content pieces depend on each other in a certain order to make sense.
Avoid directional language#
Organize interfaces around time (chronologically) instead of position (spatially) to ensure that you don’t use directional language to describe how to accomplish a task.
Prevent errors before correcting them#
Help people avoid and correct mistakes by writing in a predictable and consistent way, and make screens look and act the way people expect. Consistent navigation and identification of components across products and surfaces will aid in this. Especially in forms, label and instruct sufficiently. If an error occurs, describe the problem in text without relying on icons or colors alone.
Avoid naming things#
Every new name is a new concept that a person must learn, which increases cognitive load. But when naming is unavoidable, be consistent. Name actions across experiences and products the same, or at least predictably. Describe and define the name before mentioning it in UI content.
Describe what’s happening#
Provide titles to describe a situation, such as in
If visual content is time-based media, like a tutorial video, text provides descriptive identification and ideally offers an alternative to the visual, such as a transcript, closed captioning, or a step-by-step written guide.
Write about actions and their effects#
Take a step back to think about the interaction you’re writing about. Then, write about what controls and buttons do, not what they look like, in the interaction. Control type (e.g., “button” or “slider”) is
Write about the effect (“make changes with the Edit tool”) rather than the interaction (“click to edit”).
Don’t rely only on color or icons#
Adding words to an interface is better than relying on color or icons as the only way of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
If you use links in text, make the purpose of each link clear from the link text alone. Screen readers usually inform the reader if a word is a hyperlink, so the words “click here” or “link” get in the way. Additionally, screen readers can’t differentiate between the many times “click here” can appear in one view.
Add error message text to the interface, rather than relying only on a red outline to communicate an error state.
Don’t rely on visuals alone to communicate#
The visual metaphors of emoji and icons can have a wide variety of interpretations, especially across cultures. Describe the interface in terms of actions and tasks, not component color or visual design.
Provide alt text#
Alt text — short strings that describe the function of interface elements and describe images — improves understanding and clarity for everybody using a product, not only people using assistive technology. For example, if you were to hover your mouse over the “search” magnifying glass icon on Adobe.com, it would reveal the alt text “Search Adobe.com.” This provides more context about the available action.
Alt text for any non-text content allows it to be changed into other forms that people need, such as large print, braille, speech, symbols, or simpler language. It makes visual cues, like icons and images, legible to people with low vision using assisted services (e.g.,
Talk with engineers about providing alt text, hints, and traits for components. For example, an icon-only button that doesn’t have a text label needs to still communicate its purpose using text. Spectrum’s documentation has detailed guidance about building accessible interfaces, and the W3C also has
For alt text for images,
Writing alt text for images#
Some images work in partnership with text to communicate, while other images are more decorative. Determining if an image needs alt text depends on the presence or absence of any supplementary context that text may be providing elsewhere in an experience. A good place to start when considering if an image needs alt text is to consider if the text prefacing or following the image is descriptive enough of what the image is communicating on its own. If the answer is yes, then alt text likely isn’t necessary. Alt text in addition to other text that’s already communicating the same thing can be repetitive and redundant.
Any image that’s conveying information on its own, independent of any accompanying text, needs alt text. It’s also needed for images that include language that would need to be localized. It’s usually not needed for images that are purely decorative, or for images that are providing information that is already communicated effectively elsewhere in an experience.
If you’ve determined that an image needs alt text, start by thinking about what that image is supposed to be communicating. Then, follow these writing tips:
-
Be additive. You shouldn’t have to repeat the same information as an image’s accompanying text. Write in a way that gives context that would be lost if someone can’t view the image.
-
Use active voice.
Active voice is simpler, clearer, and more conversational, which makes alt text sound more human. -
Use consistent tone and terminology. Alt text is another part of your product’s communication, so ensure that it matches its tone and uses the same words. Don’t use any jargon that isn’t first introduced elsewhere.
-
Consider localization. Writing in a succinct, straightforward way helps ensure that alt text can be properly translated.
-
Avoid writing “image of.” With screen readers, it’s apparent that an element is an image, so saying that something is an “image of” something can be redundant. If an image is a visualization of information, such as a chart, diagram, or data visualization, describe those using phrases like “chart of,” “diagram of,” or “data visualization of.”
-
Use proper grammar and mechanics. Start alt text with a capital letter, and end with a period. Even though alt text is not often in complete sentences, doing this helps a screen reader to read the content with a natural inflection. Avoid using abbreviations of dates, times, or measurements and write out the full word, so a screen reader won’t just spell out an abbreviation.
Here’s some examples of how to write alt text, all from the Spectrum website or components:
Images that describe usage notes or guidelines#
Describe any specific examples of how to apply (or not to apply) a concept or guideline that has been outlined in other text. Be sure to include any text that’s part of the image.
3 key examples showing correct usage of writing in simple tense. She ran for president. He writes great poetry. Carmen will make the poster.