Functional images

Good example: Linked image

In the example below, the Canada.ca logo in the banner links to the Canada.ca homepage. The <img> element is nested in the link. The alt text “Government of Canada home page” provides the link text.

HTML

Code begins

<a href="https://www.canada.ca/en.html">
   <img src="https://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-en.svg" alt="Government of Canada home page">
</a>

Code ends

Good example: Icon with meaningful alt text nested in link text

In this example, an icon with the meaningful alt text “Opens in new window” is nested inside the link along with the link text “W3C Homepage”. Screen reader users experience the link as “W3C homepage, opens in new window.”

HTML

Code begins

<a href="https://www.w3.org/" target="_blank"> 
	W3C Homepage 
   <img src="new-window.png" alt="Opens in new window">
</a>

Code ends

Note: This technique is often used with icons to indicate different file formats such as AVI, ODF, MP3, PDF, Word, etc. In that case, the text alternative should convey the format represented by each icon.

Good example: Functional icon

In this example, a clickable icon representing a printer denotes print functionality. Its text alternative is “Print this page”, rather than the literal “Printer”, because the purpose is to activate the print dialog.

HTML

Code begins

<a href="javascript:print()">
   <img src="print.png" alt="Print this page">
</a>

Code ends

Good example: Image used in a button

The following image is used to give the button a distinct style. In this case, it is the button to initiate a search request and the nested icon is a magnifying lens. The text alternative for the image is “search” to convey the purpose of the button, rather than the literal “magnifying lens”.

HTML

Code begins

<input type="image" src="searchbutton.png" alt="Search">

Code ends

Good example: Redundant image within link text

In this example, the Company XYZ logo accompanies a text link that leads to the Company XYZ home page. The image does not represent different functionality or convey other information than that already provided in the link text. In effect the image is a simple visual assist to the link text. A null (empty) alt value is applied, (alt=""), to avoid redundancy and repetition.

HTML

Code begins

<a href="https://www.CompanyXYZ.ca/">   
   <img src="logo.png" alt="">
   Company XYZ home page
</a>

Code ends

Good example: Naming a functional image using the aria-label attribute

In this example, an aria-label attribute names the button, rather than the child <img> element's alt attribute. The alt attribute is set to null (empty): alt="".

HTML

Code begins

<button aria-label="Next">
   <img src="images/next.png" alt="">
</button>

Code ends

Good example: Naming functional images using the aria-label and aria-labelledby attributes

In this example, two text-styling buttons are each accompanied by an identical “more” details button. The styling buttons are named with the aria-label attribute. The “more” buttons are named with the aria-labelledby attribute, pointing to the id attribute values of the elements holding the desired label fragments: “More” + either “Bullets” or “Text alignment”. The alt attribute of each button <img> element is set to null (empty): alt="".

HTML

Code begins

<button id="bullets" aria-label="Bullets">
   <img src="images/bullets.png" alt="">
</button>
<button id="more-1" aria-label="More" aria-labelledby="more-1 bullets">
   <img src="images/down-arrow.png" alt="">
</button>
<button id="text-align" aria-label="Text alignment">
   <img src="images/text-align.png" alt="">
</button>
<button id="more-2" aria-label="More" aria-labelledby="more-2 text-align">
   <img src="images/down-arrow.png" alt="">
</button>

Code ends

Alternative approach: One instance of the “more” text label

When using the aria-labelledby attribute, developers may prefer targeting a single id attribute value for the name of a repeating element

With this approach, one defining instance of the text “More” is given an id attribute value and set to CSS display: none. The aria-labelledby (and aria-describedby) attribute can target an element that’s set to display: none. The aria-labelledby attribute concatenates a name by pointing to the id attribute values of that defining instance and the partner button, resulting in labels ”More Bullets” and “More Text alignment”.

Unlike in the first approach, the “more” buttons do not need id or aria-label attributes, as they’re not contributing to the concatenated label.

HTML

Code begins

<span id="more" style="display:none">More</span>

<button id="bullets" aria-label="Bullets">
   <img src="icons/bullets.png" alt="">
</button>
<button aria-labelledby="more bullets">
   <img src="icons/down-arrow.png" alt="">
</button>
<button id="text-align" aria-label="Text alignment">
   <img src="icons/text-align.png" alt="">
</button>
<button aria-labelledby="more text-align">
   <img src="icons/down-arrow.png" alt="">
</button>

Code ends