Play Accessibility
Alt or not?
Pick the right alt text for images in context: portraits, logos, charts and decoration.
Question 1 of 6. A profile card shows a portrait, with the name "Joshua Briley" and the role "Product design engineer" printed right next to it. What should the portrait's alt text be?
The name is already in the text beside the photo, so naming it again makes a screen reader say it twice. An empty alt tells assistive tech to skip the image.
Question 2 of 6. A logo is the only thing inside a link, and the link goes to the IVFCRYO case study. What should the logo's alt text be?
When an image is the whole link, its alt text becomes the link's name, so it should say where the link goes. "Logo" adds nothing, and an empty alt leaves the link with no name at all.
Question 3 of 6. An article about sprint planning includes a burndown chart. In the chart, remaining work stays above the ideal line until day 7, then meets it. The paragraph next to it doesn't mention this. What should the alt text be?
A chart is there to make a point. Alt text should give that point, not just name the image type. When the details matter, put the data in the page text or a table as well.
Question 4 of 6. A small wave image sits between two sections of an article, purely as decoration. What should its alt text be?
Decoration carries no information, so an empty alt keeps it out of the way. Leaving alt off entirely is different: some screen readers then read the file name instead.
Question 5 of 6. A project card has a screenshot above the visible title "Token Adventure", and both sit inside the same link to the project. What should the screenshot's alt text be?
Token Adventure The title already names the link. Alt text on the screenshot would be added to the link's name, so a screen reader would hear "Token Adventure, Token Adventure".
Question 6 of 6. A page uses an image of the words "Token Adventure", in pixel lettering, as its banner title. There is no other heading text. What should the alt text be?
When an image contains text that matters, the alt text should say the same words. Better still, use real text styled with CSS, which also scales and translates.
Context decides alt text. The same image can need a description in one place and nothing in another.