Icon elements

[Sofiya Semenova]

Hello! We've recently made some changes to the icons in the platform. From here on out, if you're adding or editing code for icons, use the span tag instead of the i tag, add aria-hidden="true", and include fallback or descriptive text.

Icons should look like this with visible text:

<span class="icon icon-error" aria-hidden="true"></span>

<span class="text">Error</span>

Or like this with screen-reader only text, in cases where visible text is not needed:

<span class="icon icon-error" aria-hidden="true"></span>

<span class="sr">Error</span>

These examples can also be found in the pattern library.

[Chris Rodriguez]

I’ve also recently merged an a11y check to ensure we don’t regress.

Chris Rodriguez
Accessibility Engineer
crodr...@edx.org