chloromaps icon indicating copy to clipboard operation
chloromaps copied to clipboard

Improve accessibility of .svg files

Open mgifford opened this issue 1 year ago • 0 comments

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

mgifford avatar Sep 21 '22 00:09 mgifford