{"id":2851,"date":"2025-11-18T09:57:17","date_gmt":"2025-11-18T14:57:17","guid":{"rendered":"https:\/\/it.rutgers.edu\/digital-accessibility\/?page_id=2851"},"modified":"2025-12-05T17:03:54","modified_gmt":"2025-12-05T22:03:54","slug":"alt-text-on-images","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/alt-text-on-images\/","title":{"rendered":"Alt text on images"},"content":{"rendered":"
\n\n
\n \n
\n
\n
\n
\n\t\t\t\t

Image guidelines<\/h1>\n\n<\/div>\n\t\t\t\t
<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<\/div>\n\n <\/section>\n\n\n
\n\n
\n \n

Having alternative text (alt text) on images allows users with assistive technology to listen and access those images.<\/p>\n

Appropriate use<\/strong><\/h2>\n

Alternative text and long descriptions<\/strong>: Whenever a page presents images and other non-text content, it should present text alternatives. These text alternatives provide the same information presented by the image.<\/p>\n

The most common form of a text alternative is alt text. Alt text is a brief label contained in the HTML code for the image.<\/p>\n

\r\n<img src=\"..\/image.jpg\" alt=\"Rutgers University Logo\">\r\n<\/code><\/pre>\n
Long descriptions are lengthier amounts of text provided nearby the image, such as in the next paragraph. Long descriptions are helpful when a brief alt text is not enough to convey information, such as in a complex chart or graph.<\/p>\n
\r\n<img src=\"..\/image.png\" alt=\"Two Pie Charts of Migrant Workers, by Income level of Countries, 2017 and Distrubtion of Migrant workers, by broad subregion, 2017. Alt text provided below image\">\r\n\r\n<b> Long Description: <\/b>\r\n<br> Migration workers, by income level of countries, 2017 The data presented in pie chart is given below:\r\n<ol>\r\n  <li>  Low income: 3.4% <\/li>\r\n  <li>  Lower middle-income: 10.1% <\/li>\r\n  <li>  Upper middle-income: 18.6%  <li>\r\n    ...\r\n\r\n<\/code><\/pre>\n
Developers and content editors should avoid using the longdesc HTML attribute altogether. Confusingly, long descriptions never should be provided directly in the longdesc.<\/p>\n
An alternative is to use the\u00a0details<\/em>\u00a0tag to provide a collapsible long description.<\/p>\n
\r\n <details>\r\n    <summary> Figure 1. Pie Chart of Migrant Workers Long Description <\/summary>\r\n    <br> Migration workers, by income level of countries, 2017 The data presented in pie chart is given below:\r\n<ol>\r\n  <li>  Low income: 3.4% <\/li>\r\n  <li>  Lower middle-income: 10.1% <\/li>\r\n  <li>  Upper middle-income: 18.6%  <li>\r\n    ...\r\n <\/details>\r\n<\/code><\/pre>\n
Decorative images<\/strong><\/h2>\n
Images that do not provide any meaning should be marked as decorative. This tells the screen reader to skip this content.<\/p>\n
\r\n<img src=\"image.jpg\" alt=\"\">\r\n<\/code><\/pre>\n
How to test for compliance<\/strong><\/h2>\n
We recommend using the\u00a0Image Alt Text Viewer<\/a>\u00a0plugin for Chrome. When activated, it will create an overlay on top of all of the images, with the alt text provided.<\/p>\n
This will let you examine whether or not an image has an alt text and if it is usable.<\/p>\n
Additionally, you can use WebAIM\u2019s\u00a0WAVE Browser extension<\/a>. This is available for Chrome, Firefox, and Edge browsers. When you click on the plug-in, an overlay will appear with all of your issues. Alt text issues should appear in the \u201cerror\u201d category and the \u201cfeatures\u201d category.<\/p>\n
Common mistakes<\/strong><\/h2>\n
Text as images:<\/strong>\u00a0You should avoid using an image of text. If there is text within an image, that text should be included in the alt text. For example, an image of the the Nike logo with the text \u201cJust do it\u201d underneath, should have \u201cJust do it\u201d included somewhere in the alt text.<\/p>\n
Missing alt text on icons:<\/strong>\u00a0Sometimes your Facebook, Youtube, or other social media icons are built into the template. Please make sure these have alt text in them. Running the above two checkers will verify this.<\/p>\n
Using color in images to convey meaning:<\/strong>\u00a0A common mistake we see are images that use color alone to convey meaning. This could include bar charts or other graphics. Consider the use of patterns in addition to the use of color.<\/p>\n
Color contrast of text in images:<\/strong>\u00a0If there is text on top of an image, please use WebAim\u2019s\u00a0Color Contrast Checker<\/a>\u00a0to manually check that the color of the text meets standards. In some cases, you may need to check multiple places on the image.<\/p>\n
Please note, automated checkers will not pick up this issue. You will need to manually check these items. We recommend you avoid using text on top of images.<\/p>\n
Other resources<\/strong><\/h2>\n