Skip to content
This repository has been 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
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

kvnlau
Copy link

@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