chloromaps
chloromaps copied to clipboard
Improve accessibility of .svg files
There are some great models here: https://deque.com/blog/creating-accessible-svgs/
Your output presently is:
<svg id="usa-map" data-tip="true" data-for="usa" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 589" width="700" currentItem="false">
<svg role="img" aria-labelledby="maptitle mapdesc" id="usa-map" data-tip="true" data-for="usa" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 589" width="700" currentItem="false"><title id="maptitle">Chloromap: A Map with USA States</title><desc id="mapdesc">This is a map which highlights differences between different USA states.</desc>
You'd want certainly have the title/description be generated by the webform obviously