Your daily frequent11y newsletter, brought to you by @ChrisBAshton:
- Think you know SVGs? This article is worth a read – you just might learn something.
- SVGs have an implicit WAI-ARIA role of “graphics-document“. You should only change this if the SVG only contains an image; an attribute of
role="img"
orrole="graphics-symbol"
would be appropriate. - Hide decorative SVGs from screen readers using
aria-hidden="true"
– notrole="presentation"
, as this doesn’t hide the contents of the SVG from screen readers. - SVGs can have a
<title>
attribute which acts like analt
attribute on a normal image. It has to be the first child element within the<svg>
. There is also an optional<desc>
element which can follow this, and should be used to present more detailed textual information. Browser support for both of these is good but not 100%;aria-label
can be added for wider support.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.