Elektrine lite

← Feed

@matuzo@front-end.social

Post #1715012

2026-02-27 08:24 UTC

When you don't put `aria-hidden="true"` on decorative SVGs, they'll be announced by some screen readers. #WebAccessibilityFails https://matuzo.at/blog/2026/put-aria-hidden-on-presentational-svgs

Replies (5)

  • @mattwilcox@mstdn.social 2026-02-27 08:30

    @matuzo@front-end.social TIL. Man, I'd say that 99.9% of any SVG I ever use is decorative. "It's an image format" even when embedded as code is how I think of them. Time to alter a few SVG files we use in default builds.

    Open ##2881281

  • @urlyman@mastodon.social 2026-02-27 08:35

    @matuzo@front-end.social thank you for this. Damn

    Open ##2881282

  • @Thain@mastodon.social 2026-02-27 08:36

    @matuzo@front-end.social at least we don't have to put focusable="false" anymore :)

    Open ##2881283

  • @julienw@pouet.chapril.org 2026-02-27 08:41

    @matuzo@front-end.social is it similar to role=presentation, except aria-hidden applies to all children too?

    Open ##2881284

  • @lea@lea.lgbt 2026-02-27 09:29

    @matuzo@front-end.social What's the best practice for svgs that are not decorative and part of the content? My current approach (probably bad, I'm super unexperienced when it comes to anything ARIA): When inline, I use . Sometimes also just aria-label. But I often put role="img" to be sure it's represented as img. Not sure if I need that. Or, have it as a separate .svg file and embed it with

    Open ##2881287