WebsightTheme
Images
Alt text for photos, icons, SVGs, image buttons and image maps. 7 automated checks Websight runs, each with a live example and a fix you can copy.
Images must have alternative text
image-altEvery img element needs an alt attribute. It holds the words a screen reader speaks instead of the picture, and the text that shows if the image fails to load. If the image is decoration, the alt should be empty (alt="") so it is skipped rather than announced as a mystery.Image buttons must have alternative textinput-image-altAn input with type="image" is a submit button that looks like a picture, often a magnifying glass or an arrow. Because the picture is the whole button, its alt attribute is the button's name. Leave it off and the button is announced as button with nothing to say what pressing it will do.Elements with role="img" must have alternative textrole-img-altAdding role="img" to a div, span or any other element tells assistive technology to treat it as a single picture. That picture then needs a text alternative, exactly like an img needs alt. Without one, the element is announced as image and nothing more. Common cases are star ratings, CSS background images, emoji groups and icon fonts.SVG graphics with an image role must have alternative textsvg-img-altInline SVG is drawn with code rather than loaded as a file, so there is no alt attribute to fill in. When the svg element has role="img" (or a graphics role), screen readers treat it as a picture and need a name from a title element, aria-label or aria-labelledby. Without one, a logo, status icon or chart is read as image or ignored.Embedded objects must have alternative textobject-altThe object element embeds another file in the page: a PDF timetable, an SVG, an audio file, sometimes a whole page. Screen readers announce it as a single thing and need a name for it. The name can come from aria-label, aria-labelledby, a title attribute or the fallback content written between the opening and closing tags. With none of these, it is announced as object, embedded, or skipped.Image map areas must have alternative textarea-altAn image map lets one picture have several clickable regions, each defined by an area element with an href. Every area is a link, and like any link it needs a name. The name comes from the area's alt attribute. Leave it off and a screen reader announces each region as link, with nothing to say where it goes.Server-side image maps must not be usedserver-side-image-mapA server-side image map is an img with the ismap attribute inside a link. When someone clicks, the browser sends the x and y position of the click to the server, which decides where to go. That only works with a pointer. There is no way to reach the regions with a keyboard, no names to announce, and nothing for voice control to target. Replace it with a client-side map (map and area elements) or plain links.Who these pages are for: the developer or site owner who has a scan result in front of them and wants to understand it, test it and fix it without a training course.
Keep going
Check your page for images issues
Websight runs these checks on any page in Chrome and shows a draft fix for each element it finds.
Add Websight to ChromeFree scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.