WebsightWhat it asks for, in plain English
Anything on the page that is not text needs a text equivalent: photos, icons, charts, logos, image buttons, CAPTCHAs and the players for audio and video. The text should do the same job the picture does. For a product photo that is a short description. For an icon button it is the action, such as Search or Close. For a chart it is the point the chart makes, in words, not the words 'bar chart'.
Pictures that are purely decorative should be marked as empty (alt="") so a screen reader skips them rather than reading out a file name. Audio and video only need a label saying what they are here; their captions and transcripts are covered by the 1.2 criteria.
A CAPTCHA needs text explaining what it is for, and a second way to pass it that uses a different sense, such as an audio version alongside a visual one.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.1.1 page has the full intent, techniques and definitions.
Who it affects
Someone using a screen reader hears 'image, hero-final-v2' and has no idea whether it was a map, a menu or a photo of the team.
A customer on a slow or metered mobile connection sees broken image boxes where the alt text would have told them which button is Checkout.
Someone who uses voice control cannot say 'click Search' when the search button is an unlabelled magnifier icon.
Example
<a href="/basket"><img src="basket.svg"></a>
<img src="sales-q3.png">
<img src="divider-swirl.png" alt="divider swirl graphic">The basket link has no text at all, the chart is announced by file name, and a decorative swirl is read out on every page.
<a href="/basket"><img src="basket.svg" alt="Basket, 3 items"></a>
<img src="sales-q3.png" alt="Sales rose from 40 to 65 thousand between July and September, with August flat">
<img src="divider-swirl.png" alt="">The link says where it goes, the chart says what it shows, and the decoration is silent.
How to check it
- Turn on VoiceOver (Cmd+F5 on a Mac) or NVDA on Windows and arrow through the page. Every picture should be announced with words that make sense, or skipped if it is decoration.
- For each image button or icon link, check the announced name is the action, not the icon's appearance ('Search', not 'magnifying glass').
- For charts, infographics and screenshots, ask whether the text alternative gives a sighted reader's takeaway. If it does not, a longer description nearby is needed.
- Switch images off in the browser and check the page still makes sense.
What Websight checks for 1.1.1
Websight runs these automated checks for 1.1.1:
aria-meter-name
role="meter" is for a measurement within a known range: password strength, disk space used, battery level.
A
Progress bars must have an accessible name
aria-progressbar-name
role="progressbar" tells a screen reader that something is in progress and how far along it is.
A
Images must have alternative text
image-alt
Every img element needs an alt attribute.
A
Image buttons must have alternative text
input-image-alt
An input with type="image" is a submit button that looks like a picture, often a magnifying glass or an arrow.
A
Elements with role="img" must have alternative text
role-img-alt
Adding role="img" to a div, span or any other element tells assistive technology to treat it as a single picture.
A
SVG graphics with an image role must have alternative text
svg-img-alt
Inline SVG is drawn with code rather than loaded as a file, so there is no alt attribute to fill in.
A
Embedded objects must have alternative text
object-alt
The object element embeds another file in the page: a PDF timetable, an SVG, an audio file, sometimes a whole page.
Websight's image checks catch pictures, image buttons, SVG graphics and image map areas with no text alternative at all. They cannot tell whether the alt text is any good, or whether an image marked decorative actually carries meaning; that part is in the manual checklist.
Practical tips
- Write the alt text for the job the image does on this page, not for what the file is. The same photo can need different alt text in two places.
- Do not start with 'image of' or 'picture of'. Screen readers already announce it as an image.
- If the image sits inside a link or button and there is other text there, give the image alt="" so the link name is not doubled.
- Keep long descriptions (charts, diagrams) in visible text near the image. Everyone benefits, and it survives when the image breaks.