Ξ

A proposal for accessible icons on the web

Published on 2017-12-30

Most websites today use some kind of icons. What is surprising about this is that HTML does not have specific markup for this. Making icons accessible is therefore not always straight forward.

The W3C's Cognitive Accessibility Roadmap and Gap Analysis proposes to allow users to personalize icons. This is my proposal on how that could be done.

A brief history of icons on the web

In order to know how a native HTML <icon> element could work, we should look at existing solutions, as well as their problems and benefits.

As icons are small pictures, the initial idea must be to use the <img> element. This gives authors a lot of flexibility and proper use of the alt attribute makes it also quite good from a accessibility perspective.

There is just one thing you have to keep in mind: Image icons should have some kind of border so they work on different backgrounds. An alternative, less robust way is to use different colored icons depending on background.

gnome folder icon on different backgrounds

gnome folder icon on different backgrounds

The second approach besides images is to make icons part of the text. In 1999 there even was a spec draft that proposed to add HTML codes for some commonly used icons. Other options are to use unicode symbols or icon fonts like font awesome.

Handling icons like text means that you can apply a lot of CSS to it, most importantly to change its color. Of course, this only works with monochrome icons. On the flip side, it is not straight forward to add text alternatives to icons like this (e.g. for cases where an icon font can not be loaded).

The most recent approach is kind of a combination of images and text: Inline SVG allows to style multi-colored icons with CSS. However, knowledge of image internals is required for that. The accessibility with these is better, but still far from perfect.

Standalone vs. Presentational

In my experience, there are two distinct usecases for icons: Sometimes icons are used with a label. Icons like this are not strictly necessary, but they help understanding the functionality quickly. An alternative text is neither required nor helpful here.

<button>
    <img src="search.svg" alt="" />
    Search
</button>

<button>
    <i class="fa fa-search" aria-hidden="true"></i>
    Search
</button>

But sometimes icons are also used on their own. In these cases, an alternative text should be used for three things:

The HTML that is currently required for this is a bit redundant:

<button>
    <img src="search.svg" alt="Search" title="Search" />
</button>

<button>
    <i class="fa fa-search" aria-label="Search" title="Search"></i>
</button>

My proposal

I propose to add something like this to HTML:

<icon type="search" />
<icon type="search" alt="" />

There would be a set of standardized icon types with name, description, and localized alternative text. By including the alternative text in the spec we get both more consistency and less redundant code. But of course it would still be possible to set alt, title, or aria-label explicitly.

You could also use non-standard icons for which the alt attribute would be required. Of course you would also have to provide an icon of this name:

<icon type="x-vote-up" alt="Vote Up" />

The set of images that is used for icons should be negotiated between authors and users because both have a legitimate reason to control it (branding/personalization). This could work a lot like the negotiation of fonts.

There is just one restriction for privacy reasons: Web pages should not be able to find out which users personalize their icons. For that reason, all icons must be square.

Open questions

Conclusion

Icons are used literally everywhere. Adding them to HTML itself would allow to make life easier for web developers at the same time as improving accessibility. But there are still some open questions, so I don't think we will see them anytime soon.