Annotations
Note 01: Image with incorrect text alternative
The text alternative for this image of text is overly verbose and does not serve the equivalent purpose of the image. The text alternative is as follows:
<img width="250" height="65" src="../img/logo.svg" alt="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner." ... >
Note: This error is derived from the Template design and occurs throughout the entire website.
-
Success Criterion 1.1.1 - Non-text Content
-
Failure 30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)
Back to demo
Note 02: Image without any text alternative
This image does not have any text alternative, so that it is unclear to some reasers if the image is important or not.
<img src="../img/concert-image.jpg"
srcset="../img/concert-image@2x.jpg 2x,
../img/concert-image@3x.jpg 3x"
... >
Note: Every img element should have an alt attribute. The attribute should be empty if the image should be ignored by assistive technology.
-
Success Criterion 1.1.1 - Non-text Content
-
Failure 65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute on img elements, area elements, and input elements of type "image"
Back to demo
Note 04: Image with inadequate text alternative
The text alternative for this image is provided in the title attribute alone, which is not usable for many readers. Moreover, the text alternative "image" does not describe the image.
<img src="../img/brain-article-image.jpg"
srcset="../img/brain-article-image@2x.jpg 2x,
../img/brain-article-image@3x.jpg 3x"
alt="image" >
Note: The techniques for retrofitting this image differ depending if the author regards this image as purely decorative or as informative.
-
Success Criterion 1.1.1 - Non-text Content
-
-
Failure 3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information
-
Failure 30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)
Back to demo
Note 06: Reading sequence not meaningful
These three columns of text appear to be visually distinct but according to the markup code they appear as one piece of running text. They would read as follows:
"After three years of effort city scientists now agree that the primary cause of the 2003 heatwave was hot air from our Mayor: These kinds of crimes need more creative, effective punishments. For example, we could require compulsory Brain donations: huge drop off in brain donations down due to the 'success' of 'Slow Traffic, Safe Streets' policy"
-
Success Criterion 1.3.1 - Info and Relationships
-
Failure 2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text
-
Success Criterion 1.3.2 - Meaningful Sequence
-
-
Failure 1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
-
Failure 49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
Back to demo
Note 08: Decorative image without empty text alternative
This image has the text alternative "bullet", which does not provide any useful information. The image should have an empty text alternative to indicate that it is a decorative image that should be ignored by assistive technology.
<img src="../img/bullet-icon.svg" alt="bullet" width="24px" >
Note: The image can also be dispayed using CSS rather than the img element.
-
Success Criterion 1.1.1 - Non-text Content
-
Failure 39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g. alt="spacer" or alt="image") for images that should be ignored by assistive technology
Back to demo
Note 09: List not marked up as such
The items "Killer bees" and "Onions" are formatted to visually resemble a list but this structural information is not represented in the HTML code.
-
Success Criterion 1.3.1 - Info and Relationships
-
Failure 2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text
Back to demo
Note 10: Image with incorrect text alternative
This image has an incorrect text alternative, "1234 56789"; possibly because the text alternative is outdated or a placeholder.
<img src="../img/artichoke-advice-telephone-hotline-copy.jpg" alt="1234 56789" >
-
Success Criterion 1.1.1 - Non-text Content
-
-
Failure 20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur
-
Failure 30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g. filenames or placeholder text)
-
Failure 71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative
Back to demo
07
08
Killer Bees Click here
10
02
