SVG ImagesWith Circles
Code to Include on all SVGs
WDN reports will give an error code of "Links must have discernible text" when SVG images are also links. For accessibility reasons we need to add the below Inline SVG code to all SVG images. Use this site as a reference: https://css-tricks.com/accessible-svgs/
- This gets added inside the <svg> tags: aria-labelledby="catTitle catDesc" role="img"
- This gets added right after the opening <svg> tag:
<title id="catTitle">Pixels, My Super-friendly Cat</title>
<desc id="catDesc">An illustrated gray cat with bright green blinking eyes.</desc> - Information displayed in RED needs to be changed to match the SVG image.
- Also, some SVGs have <defs></defs> codes removed. They will need to be added back in. Here's more info on what can go between <defs>: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs
- Samples of code can be found on the below images.