Accessibility: recommended alt-text convention for SVG and MathML?

web-development

accessibility

aria

keyboard-focus

byAlex Kataev·Oct 4, 2024

To improve accessibility, use <title> and <desc> tags for SVG elements and alttext attribute for MathML.

<!-- SVGs grow up dreaming of becoming an image -->
<svg aria-labelledby="title desc" role="img">
   <title id="title">Annual growth chart</title>
   <desc id="desc">Bar chart with steady revenue increase.</desc>
</svg>

<!-- Mathematics. Not as scary as it looks. -->
<math alttext="a^2 + b^2 = c^2" role="math">
   <!-- Math magic happens here -->
</math>

Alt text should be the verbal equivalent of the visual. It should reflect the function or story the graphic wants to convey.

Accessibility with ARIA and keyboard focus

With SVG and MathML, use ARIA for accessibility and consider keyboard focus for screen reader users.

SVG:

<title> provides a simplistic identification.
<desc> offers more comprehensive detail.
role="img" communicates that the SVG is a graphical element.
aria-labelledby indicates which elements define it.

MathML:

<div> containing role="math" and aria-label offers an audible context
For complex equations not easily explainable using aria-label, alttext can assist.

Add tabindex="0" to focus these elements during keyboard navigation.

Adapting SVG and MathML for better user experience

To create an inclusive user experience when using SVGs and MathML:

1. Optimal use of SVG elements

Keep the <text> as real text. Converting them to paths might lose important information.
If managing unique IDs becomes difficult, using <img> tags for SVGs is recommended.
Use aria-hidden="true" on decorative SVGs to prevent them from being read.

2. Textual alternatives for math and graphics

Nearby alternative text such as <figcaption> or  tags can provide an on-the-spot explanation.
For better style and accessibility, consider off-screen positioning for alternative text.

3. Wary of inconsistencies and pitfalls

Screen reader support for aria-label and alttext varies widely. Use these attributes judiciously.
Stay updated with evolving W3C specs for possible best practices.

Being aware of Screen readers' behaviour and adapting to their differences can bolster your website's accessibility:

Depending on settings or versions, all instances of <title> and <desc> could be announced by some screen readers. It's a feature, not a bug!
Screen reader support is not uniform for aria-label and alttext, especially for MathML.

It's just like actual people, screen readers have their quirks too! So, continued learning and keeping updated with changes in accessibility standards is vital.

explain-codes / Web development / Accessibility: recommended alt-text convention for SVG and MathML?

Linked

Make an HTML element non-focusable



What's the difference between HTML 'hidden' and 'aria-hidden' attributes?



Can someone explain the HTML5 aria-* attribute?



Should I use tag for icons instead of ?



How to ignore HTML element from tabindex?

