Improvements to accessibility features

[tysongach]

I was super happy to find out about the new accessibility features introduced! Thank you for that.

One thing I noticed is that when enabling these a11y features, the output of the title and desc elements do not have ID’s associated with them, which the aria-labelledby attribute expects.

I find the SitePoint article that was referenced a bit confusing here, because they do give these element ID’s, but the name of the ID’s are also the name of the elements themselves:

<svg aria-labelledby="title desc">
  <title id="title">Green rectangle</title>
  <desc id="desc">…</desc>

Not only is that hard to follow, there’s also a problem in that these ID’s are super generic and are in high risk of accidentally colliding with a duplicate ID somewhere else on the page. And we all know that ID’s need to be unique. Maybe an example like the following would be a bit more clear:

<svg aria-labelledby="green-rectangle-title green-rectangle-desc">
  <title id="green-rectangle-title">Green rectangle</title>
  <desc id="green-rectangle-desc">…</desc>

Ultimately what I’m getting at here is that inline_svg is currently referencing the title and desc elements, instead of ID’s:

<svg role="img" aria-labelledby="title desc">
  <title>Blog home</title>
  <desc id="desc">…</desc>

Making the ID’s unique is the interesting part; maybe a simple hash could help here?

[jamesmartin]

Making the ID’s unique is the interesting part; maybe a simple hash could help here?

@tysongach I like this idea. Assuming the hash is based on the title and some other "salt" value, it should be unique enough for most cases.

[jamesmartin]

Fixed in v0.9.0.