Make accessibility an option

[davewhitley]

In an effort to make Gridicons an effective icon system, I think it would great to include a way to make the icon accessible as an option.

Take a look at this article:

https://css-tricks.com/can-make-icon-system-accessible/

Icons can be either standalone or decorative.

Standalone needs to be accessible and this is the standard pattern for that:

<!-- role="img" so that the SVG is not traversed by browsers that map the SVG to the "group" role -->
<!-- aria-labelledby pointing to ID's of title and desc because some browsers incorrectly don't use them unless we do -->
<!-- if you are using a <use>-based icon system, this would be a <symbol id="unique-id"> below, but otherwise the same -->
<svg role="img" viewBox="0 0 100 100" aria-labelledby="unique-title-id unique-desc-id">

  <!-- title becomes the tooltip as well as what is read to assistive technology -->
  <!-- must be the first child! -->
  <title id="unique-title-id">Short Title (e.g. Add to Cart)</title>

  <!-- longer description if needed -->
  <desc id="unique-desc-id">A friendly looking cartoon cart icon with blinking eyes.</desc>

  <!-- all the SVG drawing stuff -->
  <path d="..." />
</svg>

Decorative just needs aria-hidden="true

<button>
  <svg aria-hidden="true" viewBox="0 0 100 100">
    <!-- or <use>, if using a <symbol>-based icon system -->
    <path d="..." />
  </svg> 
  Add to Cart
</button>

It would be great if we could somehow bake this into the icon system, instead of pushing that off to the user. You could imagine something like this working:

<Icon icon="icon-cart.svg" standalone="true" />

I'm not sure how we would go about this.