Rutgers.eduAdd Alternative Text to Images
Visual icons and images on the internet can be used to convey a story, a meaning, or maybe a function (such as a button or a link.) Though these visual functions can be useful for regular browsing, those users who may be working with a screen reader or those who have turned off images due to bandwidth restrictions will be unable to see the images themselves. In turn, the usability of the website and the understanding of content or functions can diminish.
Alternative text, also known as alt text or alt attribute, is an element that can be added to elements to help convey meaning to users who cannot see them.
How to Add Alt Text in HTML
Note: Quotation marks (“example”) cannot go within an alt text due to how it is used in HTML syntax. If adding quotes is expressly needed in your alternative text on an image, you must use the HTML character entity ” which outputs to ” in HTML.
An example of this is:
Alt Text Usage
When adding images to a website or to the content of a page, ask yourself: If I were reading this out loud to a user to help them understand or interact with the page, would I need to read the images to them and, if so, how? If I do not describe this image, do they lose any information?
If the image is being used to convey something about the content or being used in relation to the content, then alt text should be added to the image.
Instances for Using Alt Text
When the image conveys information to the current web content.
Example: Content speaks on places students use computers and attaches this photograph as a visual example.
When the image conveys complex information like a chart or a graph.
Example: Chart conveys complicated information in a line graph.
Note: In these cases, the information can be too broad to explain via a single alt text. Instead of bloating the alt element, detailed descriptions or data can be expanded on an external page.
When the image has text in it, such as a logo.
Example: Website begins with college logo.
Note: It is always better to convey words with stylized plain text over an image with text in it.
If the image serves a function on the website. The Alt text describes what the image does.
Example: A search magnifying glass on a form which states it is a search button.
Unneeded Information in Alt Text
If the image is considered decorative, the alt text can be left blank (alt=””).
Example: A decorative symbol used as a content divider.
Redundant words such as ‘button’, ‘link’, or ‘image of’.
Example: The screen reader informs the reader that the object is a photo, so stating it in the alt text repeats what will already be said by devices.
Information that is elaborated in the content itself does not need to be repeated in the alt text of an image. A more robust usage would be: “Diagram of workflow as described below.”
Example: A diagram pointing out workflow, and a small example of such in the text, followed by the syntax.
From our studies, we were able to find that a 27% majority of those surveyed enjoyed Comedy. This was followed by Action shows at 18%, and a tie for Romance and Science Fiction at 14%. The smaller groups included Horror at 11%, with Foreign and Horror tied at 8%.