🌐 Website Issue | (Screen Reader) Accessibility for Icons #1471

New Issue

jonah · 2019-11-06T23:20:14Z

jonah commented

2019-11-06 23:20:14 +00:00

We should make sure all our icons appear appropriately for users with screen readers, as detailed on Font Awesome's accessibility guide, namely: Adding aria-hidden="true" to purely decorative icons, and adding an aria-label to icons that have distinct meanings not explained by the corresponding text.

We can use the sr-only class to hide elements on all devices besides screen readers as well.

We should make sure all our icons appear appropriately for users with screen readers, as detailed on [Font Awesome's accessibility guide](https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility), namely: Adding `aria-hidden="true"` to purely decorative icons, and adding an `aria-label` to icons that have distinct meanings not explained by the corresponding text. We can use the [`sr-only` class](https://getbootstrap.com/docs/4.0/utilities/screenreaders/) to hide elements on all devices besides screen readers as well.