Icons
Applying the correct markup for icons can differ depending on the context of why/where the icon is used. Check below for more ways to correctly apply icon markup to satisfy accessibility requirements.
Icon Sizes
Change icon size by predetermined sizes, to keep the icons sharp and legible. As size increases, icon complexity can be increased and more details can be shown as part of the icon. An icon at 16px will have reduced details than say the same icon at 64px.
Standalone Icon
When an icon is unaccompanied by visible text element and is a meaningful action trigger on it’s own. In modern browsers, the following code example is okay.
Update the icons title to be reflective of what the icon is there for. In our case below, the icons message says "This service supports mobile devices".
Add role="img" to the <svg> because SVG is not mapped consistently, so it is not always acknowledged by ’AT‘ (assisted technology).
Decorative Icon
Decorative icons (icons that support the information conveyed by text or do not add significant value) do not need alternative text and they should be hidden from the screen reader. Hide by using aria-hidden="true".
Linked with Text
For linked icons that are paired with text use the aria-label="" on the <a> element to provide descriptive, alternative text.
Note that with the aria-label on the link, the screen reader will not announce text inside the <a> element.
Linked Icon with Dynamic Text
If there happens to be a dynamic value in text used within the <a> and an icon, we should not use aria-label on the <a> because then the value of the dynamic text is lost.
Use spans and the off-screen text method to provide assisted dynamic text.