Improve icon accessibility #137

New Issue

2026-07-24T12:16:15+02:00

jakob.gregory commented

2026-07-24 12:16:15 +02:00

Problem

The shared Icon component currently renders all icons as plain <img> elements without any accessibility attributes.

Most icons in the frontend are purely decorative (e.g. search, settings, theme icons) and should not be announced by screen readers. Without explicitly marking decorative icons as such, assistive technologies may provide unnecessary or confusing output.

Proposed solution

Extend the Icon component to distinguish between decorative and informative icons.

For example:

Add a prop (e.g. decorative) that defaults to true.
When an icon is decorative:
- set aria-hidden="true"
- set alt=""
When an icon conveys information:
- allow providing an alt or aria-label via props.

This keeps the component flexible while improving accessibility for the common case.

Goals

Prevent decorative icons from being announced by screen readers.
Allow informative icons to expose accessible text when needed.
Improve accessibility without changing the visual appearance.

## Problem The shared `Icon` component currently renders all icons as plain `<img>` elements without any accessibility attributes. Most icons in the frontend are purely decorative (e.g. search, settings, theme icons) and should not be announced by screen readers. Without explicitly marking decorative icons as such, assistive technologies may provide unnecessary or confusing output. ## Proposed solution Extend the `Icon` component to distinguish between decorative and informative icons. For example: - Add a prop (e.g. `decorative`) that defaults to `true`. - When an icon is decorative: - set `aria-hidden="true"` - set `alt=""` - When an icon conveys information: - allow providing an `alt` or `aria-label` via props. This keeps the component flexible while improving accessibility for the common case. ## Goals - Prevent decorative icons from being announced by screen readers. - Allow informative icons to expose accessible text when needed. - Improve accessibility without changing the visual appearance.

jakob.gregory added this to the 0.1.0 milestone 2026-07-24 12:16:15 +02:00

jakob.gregory added the Kind/Feature Area/Global

Priority

Medium

3

labels 2026-07-24 12:16:15 +02:00

jakob.gregory added this to the Project Board project 2026-07-24 12:16:15 +02:00

jakob.gregory added Kind/Enhancement

Priority

Low

4

and removed Kind/Feature