Today I Learned - Rocky Kev

TIL alt text for logos, the right way

POSTED ON:

TAGS: accessibility html

Via the HTML Spec docs themselves:

Putting Alt Text for logos

For your logo:
OPTION 1: The icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty.

<nav>
 <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
 <p><a href="/configure/"><img src="/icons/configuration.png" alt="">Configuration Tools</a></p>
</nav>

Notice the icon is next to text, which says the same thing.

OPTION 2: The icon has no text next to it describing what it means; the icon is supposed to be self-explanatory. In those cases, an equivalent textual label must be given in the alt attribute.

  <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
  <p><img src="movies.png" alt="Movies"></p>

  <h1>Latest TWiT episode is online</h1>
  <p><img src="podcasts.png" alt="Podcasts"></p>

OPTION 3: If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by the logo. The alt attribute must not contain text like the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity itself.


  <h1><img src="XYZ.gif" alt="The XYZ company"></h1>
  <p>We have recently been looking at buying the <img src="alpha.gif" alt=""> ΑΒΓ company, a small Greek company
  specializing in our type of product.</p>

REFERENCES:
https://html.spec.whatwg.org/#a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos

Related TILs

Tagged: accessibility

TIL aria-expanded for showing when things are hidden/shown

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

TIL ARIA role presentation

Think of this as a reset. You use role=presentation to remove semantic meaning from an element.

TIL reduce-motion-blur

Dizziness and vertigo are symptoms of a vestibular balance disorder. If the user has set up a user preference that they prefer motion-based animation be disabled/reduced, we can tap into that. As web developers, we can also support them.