Skip to content


What component has

Roles & attributes

According to the ARIA in HTML document, SVG has no default corresponding role, but you can set the role this icon has in the interface (for example, button, link).

The list below describes roles and attributes that component already has.

Roles and attributes
aria-hidden="true"img, svgHides images from the assistive technologies, because this element is auxiliary and shouldn't be played by a screen reader.

Considerations for developers

  • The best way to make SVGs accessible to Assistive Technologies like screen readers and speech recognition tools is to put it directly into your HTML using the <svg> tag.
  • Illustration also might be interactive, just use role button or link for it (see the table below).
  • If you use illustration as a clickable element, always add an appropriate aria-label (recommend your designers to prepare it).
  • Avoid using <embed>, <object>, or <img> elements as they are not as supported by browsers as inline SVG.

Find live examples in the A11y style guide.

Roles & attributes

The list below will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces.

aria-labeldivDefines a string value that labels an interactive element. It is a required for buttons without text content.
aria-labelledbydivThe aria-labelledby attribute identifies the element (or elements) that labels the element it is applied to. It is a required for buttons without text content.

Considerations for designers

  • If an illustration has a function in the interface, it should be conveyed to the user through assistive technologies. In this case you should provide an appropriate aria-label for it.
  • Avoid using generic strings like photo, image, or icon as alt values, as they don’t communicate valuable content to the user. Be as descriptive as possible.
  • Make sure any text in images of text is at least 14 points and has good contrast with the background.
  • Check illustration contrast against background. The contrast ratio should be at least 3:1.

How to provide appropriate text alternatives based on the purpose of the image

Image types
Image typeDescription
Informative imageImages that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.
Decorative imageProvide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
Functional imageThe text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.
Image of textReadable text is sometimes presented within an image. If the image isn’t a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.
Complex image such as graph and diagramTo convey data or detailed information, provide a complete text equivalent of the data or information provided in the image as the text alternative.
Group of imagesIf multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.
Image mapThe text alternative for an image that contains multiple target areas should provide an overall context for the set of links. Also, each individually target area should have alternative text that describes the purpose or destination of the link.


Other recommendations

See more accessibility recommendations in the common Accessibility guide.

Released under the MIT License.

Released under the MIT License.