dai11y 30/06/2021

Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

Accessible SVGs

  • 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" or role="graphics-symbol" would be appropriate.
  • Hide decorative SVGs from screen readers using aria-hidden="true" – not role="presentation", as this doesn’t hide the contents of the SVG from screen readers.
  • SVGs can have a <title> attribute which acts like an alt 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.

Loading...