Graphic element

A graphic element is any non-textual visual content: image, SVG icon, pictogram, data chart. The term goes beyond the simple <img> tag and also covers <svg>, <canvas> and <object>. Every graphic element that conveys information must have a text alternative; every decorative element must be hidden from assistive technologies.

Your page displays a magnifying glass icon in the search button. In HTML, it's an <svg>. For a screen reader, it's… nothing at all. Unless you've made it accessible.

#Much broader than an <img> tag

The RGAA defines a graphic element as any element "making use of a visual representation": bitmap images (<img>), vector images (<svg>), embedded objects (<object>), <canvas>, and even icons loaded via icon fonts. A data chart with its bars and curves is a single graphic element made up of multiple parts. Each point on a curve may require its own description.

Why this broad definition? The WCAG 1.1.1 criterion requires a text alternative for "any non-text content". It targets all graphic elements. Not just <img> tags.

The classic pitfall: thinking "image = <img> with an alt". Inline SVGs, <canvas>, icon-font pictograms slip through the cracks. 58% of homepage pages analyzed by WebAIM Million have at least one image without an alternative. Forgotten SVGs contribute to this.

#SVG: the case that catches everyone out

An inline <svg> has no alt attribute. How it's handled depends on its role on the page.

Informative, the SVG conveys content:

<svg role="img" aria-label="Sales up 15% in Q3">
  <title>Sales up 15% in Q3</title>
  <!-- … -->
</svg>

role="img" is mandatory. Without it, browsers do not reliably convey the SVG's <title> to assistive technologies.

Decorative, the SVG adds nothing to the meaning:

<svg aria-hidden="true">
  <!-- … -->
</svg>

No <title>, no <desc>, no aria-label. Only aria-hidden="true" so the screen reader ignores it.

Inside a button or link, the SVG serves as an action trigger:

<button>
  <svg role="img" aria-label="Search" focusable="false">
    <path d="…"/>
  </svg>
</button>

Here, aria-label describes the button's function, not the icon's appearance. "Search", not "magnifying glass".

#In summary

A graphic element is anything that communicates visually without being text: <img>, <svg>, <canvas>, <object>, icons. The same accessibility obligation applies to all. If it carries information, give it a text alternative. If it's decorative, hide it. The habit to develop: don't stop at <img>.

Back to glossary
Share this article

Learn more

Information-carrying image

An information-carrying image is an image whose removal would cause a loss of meaning to the page. It conveys content that the surrounding text does not provide. The RGAA and WCAG require that it carries a text alternative describing the information conveyed, not the appearance of the image.

Decorative Image

A decorative image is an image that provides no information to the page content. In HTML, it receives an empty alt attribute (alt="") so screen readers ignore it. Without this attribute, the screen reader reads the filename instead.

Alternative text

Alternative text is the text that a screen reader reads instead of an image. In HTML, it's the alt attribute on images. Its content depends on the image's role on the page: informative, decorative, or functional.