search

lemoynelibrary / lemoyne

Files used in setting up new web design in LibGuides v2 and elsewhere
5 stars 1 forks source link

Update SVG Logos for improved accessibility #28

Closed tomkeays closed 6 years ago

tomkeays commented 6 years ago

This 2013 article, https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/ and this 2016 article, https://css-tricks.com/accessible-svgs/ both recommend the following pattern to improve SVG image accessibility. 

<svg xmlns=http://www.w3.org/2000/svg role="img" aria-labelledby="circle-title circle-desc">
   <title id="circle-title">Circle</title>
   <desc id="circle-desc">Large red circle with a black border</desc>
   <circle role="presentation" cy="60" r="55" stroke="black" stroke-width="2" 
   fill="red" />
</svg>

According to https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute

The aria-labelledby attribute contains the element IDs of labels in objects such as input elements, widgets, and groups. The attribute establishes relationships between objects and their labels. Assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them. Without an element ID, the assistive technology cannot catalog the object.