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.

  • Use keywords

    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 alt="external site".
    • Lock icons that are added to the end of a link, denote a secure site. Use alt="secure site".
  • Social Media icons

    Social media icons found in the footer on all pages of myCigna.com are assigned the following alt-text:

    • alt="Facebook"
    • alt="Twitter"
    • alt="YouTube"
    • alt="LinkedIn"
  • 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 alt="<#>% completed".

  • Link Text

    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.”

The Digital Content Strategy team works with other team members to ensure appropriate alt-text is applied to images and icons.

More Resources