What it is
Alt-text is text that’s used to describe images and icons that appear within a webpage. Images and icons cannot be read by screen readers or indexed by Google without a text equivalent to describe them.
Alt-text is added as an HTML tag within the content management system when the page is developed. Alt-text is not visible on the page itself.
Rules for Creating Alt-Text
Keep it concise, but descriptive
Text alternatives should be as short as possible, but still give a user who cannot actually “see” the image a clear idea of what it is.
Use natural language
As with the text on the page itself, alt-text should be written at a 6th grade reading level and understandable to site visitors.
Alt-text can best support search engine optimization (SEO) when main keywords are included in the description. Try to include one or two main keywords without making the alt-text unnecessarily long or clumsy.
Avoid “picture of,” or “image of,” language
Alt-text automatically indicates to both search engines and to screen readers that this is a picture or image. Adding this language is redundant and unnecessary.
Instead of “Picture of a man at the doctor’s getting a flu shot,” use, “A man at the doctor’s getting a flu shot.”
Give alt-text to image buttons
For buttons that are images, include alt-text that describes what the button does, such as “submit,” “get started,” or “cancel.”
Give alt-text to website logos and functional icons
A company logo commonly links to the site home page. Alt-text should also be assigned to other commonly used icons found throughout the site. This includes icons used to identify links to external, third-party sites or “secure links” to sections of the site that require a log-in process.
The Cigna logo should simply state
alt="Cigna". It’s not required to identify the Cigna logo as a “logo” within the alt-text.
Third-party website icons should have alt-text assigned as
Lock icons that are added to the end of a link, denote a secure site. Use
Social Media icons
Social media icons found in the footer on all pages of myCigna.com are assigned the following alt-text:
Use of “decorative” images and icons
Images and icons that offer no additional meaning do not need alt-text applied.
If an image or icon does not convey relevant or important content, the alt attribute,
alt=""should be used. Progress bars or visuals that offer context related to “status” (using real-time dynamic data), for example, “Step 2 of 4,” or “Your Progress = 50%,” are assigned the alt-text
alt="Step <#> of <#>"or
In situations in which we are constrained to link text that’s not descriptive enough, we can apply additional context by assigning alt-text.
For example, if the link text is, “Learn more,” the alt-text applied could be
alt="about your HRA". Screen readers will identify “Learn more” and the additional language to read aloud as, “Learn more about your HRA.”