Skip to content
This repository was archived by the owner on Mar 18, 2023. It is now read-only.

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

Open
kvnlau wants to merge 1 commit into
mrsum:developfrom
kvnlau:bug/hide-sprite-for-assistive-technologies
Open

Add display none to SVG sprite by default to improve accessibility#187
kvnlau wants to merge 1 commit into
mrsum:developfrom
kvnlau:bug/hide-sprite-for-assistive-technologies

Conversation

@kvnlau
Copy link
Copy Markdown

@kvnlau kvnlau commented Mar 5, 2021

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:

  • verify their SVGs do not have masks (in which case they can upgrade straight away)
  • If masks are used, make sure they render correctly, otherwise update SVGs to use paths instead

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant