More accessible today than yesterday

a11y space
  • Home
  • Join
Back to Lighthouse errors

Image elements do not have [alt] attributes

Alt text for images

Alternative text for images is both the easiest and the most difficult accessibility standard. Put simply, every image MUST have Alt text - the text that screen readers and bots can read in place of the image.

Webflow automatically gives all images a null value, Alt = "", which hides the images from screen readers. So it should be impossible to fail this automatic test.

It's important that every Alt text is meaningful and you can follow the Alt Tag decision tree to see how best to write your Alt text.

Where a Webflow site fails this Lighthouse test it's because the developer has added a widget such as Facebook, Google Maps or a chat box, or the image is brought into Webflow from another server as a link. Here the image source needs to hold the Alt text.

‍

‍

Screenshot of Facebook widget
Facebook widget embedded on a Webflow page

‍

Ebay image link to Webflow page

‍

Google Lighthouse says

Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute.

Technical Log

Webflow development 

Workflow

Lighthouse weighting

10

WCAG Guidance

H67: Using null alt text and no title attribute on img elements for images that AT should ignore
H62: Using the ruby element
H37: Using alt attributes on img elements
H24: Providing text alternatives for the area elements of image maps
H36: Using alt attributes on images used as submit buttons
H44: Using label elements to associate text labels with form controls
H65: Using the title attribute to identify form controls when the label element cannot be used
H86: Providing text alternatives for ASCII art, emoticons, and leetspeak
G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
G196: Using a text alternative on one item within a group of images that describes all items in the group
G95: Providing short text alternatives that provide a brief description of the non-text content
G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content
G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description
G92: Providing long description for non-text content that serves the same purpose and presents the same information
G82: Providing a text alternative that identifies the purpose of the non-text content
G68: Providing a short text alternative that describes the purpose of live audio-only and live video-only content
G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content
G143: Providing a text alternative that describes the purpose of the CAPTCHA
G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality
C9: Using CSS to include decorative images
No items found.
Pictures with alternative text
Perceivable
1.1.1 a
Non-text content - Images
A
Bot readable icons
Perceivable
1.1.1 c
"Non-text Content - Controls, Input"
A
Alternative text for video and audio
Perceivable
1.1.1 d1
Non-text Content - Time-based media
A
Alternative identification for test items
Perceivable
1.1.1 d2
Non-text Content - Test
A
Alternative description of sensory experiences
Perceivable
1.1.1 d3
Non-text Content - Sensory
A
Text based CAPTCHA alternative
Perceivable
1.1.1 e
Non-text Content - CAPTCHA
A
Decorative content. Alt = " "
Perceivable
1.1.1 f
"Non-text Content - Decoration, Formatting, Invisible"
A
Bot readable charts and diagrams
Perceivable
1.1.1 b
Non-text Content - Chart or diagram
A
Comment on this page
Close
Thank you for your comment
Oops! Something went wrong while submitting the form.
  • About
(C) 2020 a11y.space