mrsum / webpack-svgstore-plugin

Simple svg-sprite creating with webpack
https://www.npmjs.com/package/webpack-svgstore-plugin
200 stars 92 forks source link

Add display none to SVG sprite by default to improve accessibility #187

Open kvnlau opened 3 years ago

kvnlau commented 3 years ago

Raising this PR to handle accessibility issues caused by the SVG sprites. In Windows on NVDA and JAWs, screen readers struggle when they get to the sprite (ie. straight away as its inserted at the top of the document), and they'll try to read every SVG out. On NVDA in Windows each sprite will be read as “graphic”, and JAWS will complain about descriptions not being available. By applying display: none to it, all screen readers will simply ignore it.

We were able to patch this up by passing the display: none manually but it really should come as default as there's no reason to introduce barriers to accessibility.

The reason why its marked as a minor version and not a patch is because we found that in applying this change, certain SVGs with masks inside it stopped rendering correctly (certain parts were missing / hidden).

Before upgrading, users MUST: