Test Page Notice
This page contains intentionally problematic accessibility patterns for testing and demonstration purposes only.
Do not use these examples in production websites. They violate accessibility guidelines and best practices.
This page is designed to work with the Accessibility Visualizer browser extension to help developers identify and understand accessibility issues.
Images
Images are a fundamental part of web content that must be accessible to users of assistive technologies such as screen readers. The following examples demonstrate various approaches to image accessibility, including both correct implementations and common mistakes.
<img> element
The img element requires proper alternative text (alt) to be accessible.
Image with alt text
Properly accessible image with descriptive alternative text. This is the correct way to make images accessible.
Image with alt and title
Image with both alt text and title attribute. The title attribute shows as a tooltip. Using tooltips can be problematic as users may not be aware of their existence or may not be able to see them at all.
Image without alt attribute
❌ Missing alt attribute - this is problematic! Screen readers will announce the filename or 'image' instead of meaningful content.
Image with title but no alt
❌ Alternative texts should be specified via alt attribute.
Decorative image with empty alt
⚠️ Empty alt attribute indicates that the image does not contain any information. It is important to consider carefully wheter or not there is really any informaiton that users should know.
Decorative image with empty alt and title
Decorative image marked properly with empty alt, assistive technologies may ingore it. However, the tooltip show by title attribute is only visible to mouse users, which is inappropriate.
Image with aria-hidden
Image hidden from assistive technologies using aria-hidden. This is another way to mark decorative images, though empty alt is more common.
<svg> element
Recently often used for icons. SVG elements can be made accessible using techniques including title elements, aria-label, and role attributes.
SVG with title element
⚠️ Using title element in svg element is the standard way to make SVG content accessible. But some screen readers and browsers may not support it well. It is better to set role to img.
SVG with title element and role=img
✅ Using title element to provide an accessible name and role=img to explicitly indicate it is an image. This makes it clear that the graphic is an image.
SVG without title element
❌ SVG without title or other accessibility attributes. Screen reader users cannot understand what this graphic represents.
SVG with aria-hidden
SVG hidden from assistive technologies. Use this for decorative graphics that don't convey any information.
SVG with aria-label
⚠️ SVG with aria-label attribute. But some screen readers and browsers may not support it well. It is better to set role to img.
SVG with img role
✅ SVG with explicit img role and aria-label. This clearly indicates the SVG is an image and provides its accessible name.
SVG with presentation role
SVG marked as decorative using role='presentation'. This removes semantic meaning from the SVG.
role="img"
Use role="img" to convey non-img elements as images. An accessible name must be provided using aria-label or aria-labelledby.
role="img" with aria-label
✅ Proper use of role='img' with descriptive aria-label. This technique is useful for text-based graphics or emoji.
role="img" without aria-label
❌ Missing accessible name. Screen readers may announce 'image' or read out the raw text characters, causing confusion.