Alt Text, alternative text for images

Topics

The alt attribute (“Alt text”) is used to provide an alternative to the image for users who can’t see it.

Best practice Best practice

  • Give all HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. <img> elements an alt attribute.
  • Describe (for non-visual readers) the contents and purpose of the image in the alternate text.
  • Use CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. to insert images that are only decorative, like a logo or icon.
  • Give any decorative images in an img element an empty alt attribute ( alt="" ).
  • If an alt attribute is not inserted in the Media Library, this will be interpreted as alt="" in the frontend.
  • If an image contains as link, the alt attribute should contain the target of that link (e.g. the post title), and not the description of the image.

Top ↑

Code examples Code examples

<img src="../../gallery/illustration.png" alt="description of the illustration">
Correct: will be interpreted as "description of the illustration, image" (example by Apple VoiceOver)

<img src="../../gallery/illustration.png" alt="">
Correct: will be interpreted as "image" (example by Apple VoiceOver)

<a href="blog.html"><img src="icon.png" alt="Blog Postings"></a>
Correct: will be interpreted as "link, image Blog Postings, image" (example by Apple VoiceOver)

<img src="../../gallery/illustration.png">
<img src="illustration.png">
False: will both be interpreted as "illustration.png, image" (example by Apple VoiceOver)

Top ↑

Visual example Visual example

Screen shot of add image modal in the editor
Image from WordPress Media Library where you can insert various metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress.-information for an image. An alternative text can be inserted in the Alt Text-field

Top ↑

In detail In detail

The alt attribute from the <img> element – often called “alt text” or even wrongly “alt tag” – is used in screen readers. The text in the alt attribute is interpreted by screen readers, as an alternative for the image. When an <img> element doesn’t have an alt attribute, the filename from the src attribute will be presented instead.

Inserting alt attributes Inserting alt attributes

An alt attribute should always be inserted. The content of the alt attribute depends on the relevance of the image for understanding that context.

An alt attribute with a description should be added:

  • images that contain text that is not provided nearby
  • images that illustrate the content in the broadest sense
  • images with complex information should be described briefly in the alt attribute, and the information should be provided elsewhere on the page

An alt attribute with the target should be added:

  • images that contain a link

An empty alt attribute (alt="") should be added:

  • when images are decorative; but it is better to insert such images using CSS

If an alt attribute is not inserted the filename of that image will be provided. Read more on Are alt attributes required? Always?

On the Web Accessibilitya11y Accessibility (https://a11yproject.com/). A11y is an acronym for accessibility. The 11 represents the 11 letters that were removed between the a and y to make accessibility shorter to write particularly on social media. Tutorials of the W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. the great Alt Decision Tree tool is an almost comprehensive guide that describes how to use the alt attribute of an image in various situations.

Top ↑

Benefits Benefits

Blind, people with visual and readability limitations will benefit when using a screen reader.

The alt attribute helps with Search Engine Optimization. Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image (source https://support.google.com/webmasters/answer/114016).

Top ↑

WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. 2.1 Success Criterion WCAG 2.1 Success Criterion

Top ↑

<no related subjects yet inserted>

Top ↑