User Experience at IU

You may recall that decisions made during the design process directly affect about two thirds of Web Content Accessibility Guidelines (WCAG) 2.1 success criteria. You can use WCAG to measure the accessibility of digital products, and there are tools that explain which criteria design and development roles are responsible for. The Web Experience Toolkit, for example, provides a helpful responsibility breakdown.

In part one of this series, we explained how you can increase accessibility with structure and labeling. Now let’s consider more visual components.

Alt text

Alternative (alt) text describes an image, so people who may not see the image can still interact with it. For example, screen readers will announce alt text—but that text will also appear on the screen if an image fails to load. Meaningful images need alt text, and someone has to write it. This includes logos, icons, charts and graphs, and any other images.

Meaningful vs. decorative images and graphics

Is each image, icon, or graphic meaningful, or is it decorative? If you removed the image, would you lose the information or context it provides? If so, you’ll want to replace that image with text. This replacement text will be your alt text: alt=“description of the image”.

• Do provide alt text for meaningful images, icons, and graphics: alt=“description of the image”.
• Do indicate if an image is purely decorative with alt=“”. (Assistive technology will ignore the image.)
• Do provide alt text if you aren’t sure.
• Don’t duplicate caption text in the alt text. Alt text describes the image while a caption gives context.

Images and graphics near descriptive text

Is there visible text in close proximity to the image that describes it (and is not an image caption)? For example, on a profile page, the person’s name might be located next to their image. In this case, alt text would be redundant. (If you’re not sure, provide alt text.)

• Do indicate that alt text is not needed with alt=“”.
• Don’t include redundant information in your alt text.

Images of text

Is there text embedded in your image? If so, assistive technologies don’t have access to that text, which means they can’t refer to it.

• Don’t use images of text, if possible.
• Do include the image’s text in the alt text.

Color and style

Not everyone perceives color. Not everyone perceives size, shape, or other visual characteristics either. This can affect how well people with low vision or color vision deficits understand your website or application. That’s why it’s important to be mindful about your use of color (and combinations of color).

Color contrast

Color contrast is especially important because it affects readability. To be discernible, text and other objects need enough contrast with the background.

If your prototypes include the final design’s colors, have you checked the color contrast? You should check the color contrast of three things:

1. Text to its background
2. Inline link text to paragraph text
3. Buttons and other interactive elements to the background

The color combinations should exceed the recommended contrast ratios.

• Do check color contrast.
• Do exceed the recommended minimum contrast ratios.

References to color

Do you have any instructions that rely only on color? For example, “choose the green button to continue” doesn’t help someone who can’t distinguish which button is green.

• Don’t rely only on color to identify something.
• Do find other ways to identify items.

References to senses

Do any instructions rely only on sensory descriptions? Just as with color, not everyone can perceive sensory descriptors, like “the large button” or “on the right.” Some descriptions, such as left and right, may not apply if content has been rearranged to fit a smaller screen or when accessed with a screen reader.

• Don’t rely on size, location or shape to identify something.
• Do find other ways to identify items.

Emphasizing with color

Are you communicating important information only through color? For example, if you indicate an overdue status with only red text, not everyone will perceive that. That doesn’t mean you can’t use the red text, only that you need to use another method of indicating the same information. In the same example, adding the text “Overdue” would convey that information to people who can’t distinguish the color.

• Don’t rely only on color to indicate a point.
• Do include icons or text in addition to color.
• Do use patterns in addition to color for graphs, charts, and other complex graphics.
• Do view your design in grayscale to see if any information is lost. (Both Mac and Windows users can change their display to grayscale in the system preferences.)

Conclusion

Being mindful of accessible images, colors, and style doesn’t just benefit users with impairments. It can also benefit those using smaller devices, devices in the sun, or slower networks. In part three, we’ll look at tables and widgets.