Skip to content

Alt‐Text Guidelines

Jump to bottom
Mai edited this page Jan 28, 2025 · 12 revisions

At Techtonica, we strive to meet the accessibility needs of all users. Below are guidelines for properly using alt-text on our site. As defined by Susan Robertson, the alt attribute is meant to provide "alternate text" descriptions of images to ensure that people do not miss out on information conveyed by graphics. (Source: Using alt text properly)

Can Alt-Text Have Line Breaks?

In a short article on coding alt text by Steve Faulkner, he advises against using line breaks in the alt-text. This is because screen readers may pause at the end of a line, and when they resume, they might repeat the object role (e.g., "graphic") at the beginning of each new line.

Example:

<img alt="Having no line breaks in HTML code of alt attributes produces better UX,
than
having
line
breaks.">

This may be read aloud as:

  • "Graphic, Having no line breaks in HTML code of alt attributes produces better UX, graphic, than, graphic, having, graphic, line, graphic, breaks."

How Long Should Alt-Text Be?

Keep Your Alt-Text Fewer Than 125 Characters

  • Screen-reading tools typically stop reading alt-text at around 125 characters. Long alt text can be cut off awkwardly, preventing users from receiving the complete description. To ensure full readability, it's recommended to keep your alt-text fewer than 125 characters.

Should we include emojis?

  • In short, no! While emojis can add personality and context to content, they pose challenges to accessibility and inclusivity.

  • Screen Readers: Screen readers interpret emojis based on their Unicode descriptions. These descriptions vary across platforms, which can lead to confusion. For instance, an emoji that looks joyful on one platform might seem solemn on another.

  • Distraction: When multiple emojis are used together, screen readers announce each emoji's description individually. This can overwhelm and distract users.

Should we use special characters?

In most cases, special characters should be avoided unless they are essential to the message. Here’s why:

  • Screen Reader Compatibility: Special characters can be misinterpreted or skipped by screen readers, making the content harder to understand.
  • Clarity: Using plain English with standard punctuation is quicker and easier for users to process.
  • Broad Accessibility: Avoiding Unicode characters ensures your content is accessible to the widest possible audience. (Source: How special characters and symbols affect screen reader accessibility)

Tips for Good Alt-Text

  • Be Descriptive: Accurately describe the content or function of the image. For example, instead of saying "image of a dog," say "a golden retriever running in a park."

  • Be Concise: Keep it brief—around 125 characters or fewer—without losing meaning.

  • Be Context-Aware: The alt-text should consider the surrounding content and how the image relates to it. If the image is part of a link or button, describe its role in that context.

  • Avoid Redundancy: Do not repeat information already provided in nearby text. For instance, if the surrounding text says "Contact Us," there's no need to describe a phone icon as "phone icon for contacting us." (Source: Image Alt Text: What It Is, How to Write It, and Why It Matters to SEO)

Examples for Writing Alt-Text on Techtonica's Site

  • Example 1: Techtonica's Logo
<img alt="Techtonica Logo">
  • Example 2: A long testimonial on the site
<img alt="Testimonial on LinkedIn from Abbie, a 2024 Techtonica Grad: 'Thank you, Techtonica, for kicking off my tech journey.'">
  • Example 3: A photo
<img alt="A street in San Francisco's Tenderloin neighborhood, with buildings lining the sidewalk, cars driving by, and people walking.">
Clone this wiki locally