search

JetBrains / svg-sprite-loader

Webpack loader for creating SVG sprites.
MIT License
2.02k stars 273 forks source link

style(runtime): set aria-hidden to true to the splite for the accessi… #348

Closed karszawa closed 3 years ago

karszawa commented 5 years ago

…bility reason

The sprite is inserted immediately below the body element, but all elements immediately below the body must be either landmarks or invisible for the blind users. Please see this document for the detail. https://dequeuniversity.com/rules/axe/3.2/region?application=axeAPI

What kind of change does this PR introduce? (bugfix, feature, docs update, improvement)

improve accessibility

What is the current behavior? (You can also link to an open issue here)

The splite is inserted immediately below the body element and is not marked as aria-hidden so that blind people's experience goes bad and some accessibility tools (react-axe) cause a warning like below.

image

What is the new behavior (if this is a feature change)?

Set aria-hidden=true to the splite

Does this PR introduce a breaking change?

No

Please check if the PR fulfills contributing guidelines

Linted, tested and followed the rules of commits 😺

DanielaValero commented 5 years ago

@kisenka Do you have an indication on when this PR could be reviewed and potentially merged?

I was trying to add this via plugin configuration, however the sprite is not updated with the aria-hidden attribute or the config given in the plugin.

new SpriteLoaderPlugin({
      plainSprite: true,
      spriteAttrs: {
        'aria-hidden': 'true',
      },

But when giving a step backwards thought to this, the issue happens to everyone using this loader, and ideally the sprite is hidden from screen readers for everyone, otherwise the screen reader user will hear image, image, image, image and so on, for all the elements inside the sprite.

ryuran commented 5 years ago

Hi @kisenka what do you think about it? Please merge and release this accessibility improvment.