A proposal for accessible icons on the web

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.

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:

• It should be used if the image can not be rendered by the user agent (e.g. for screen readers)
• It should be used if the image fails to load (e.g. network issue) (note that this does not currently work with icon fonts)
• It should be used in a tooltip for users who do not understand the image

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

• How does branding/personalization work exactly? It somewhat works with fonts, but that's still far from perfect.
• How should styling work for icons? More like images or more like text? The SVG approach does not seem to fit with personalization because it requires knowledge of image internals.
• Related to the above: In which file format would icon sets be provided?
• Publishing a new version of the spec for every new icon seems tedious. How can new icons be added to the registry without the hassle of a full standardization process?

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.

Update (2018-02-16): The new working draft of the Personalization Semantics Content Module takes a different approach:

<img aui-symbol="http://wordnet-rdf.princeton.edu/wn31/girl-n" href="mygirlsy.bmp" >

You simply add aui-symbol to any exitsing icon element. Browsers can then decide to render their own icons instead. This does not address all of the issues I discussed above, but it is definitely less invasive.