Font Awesome Icons

Accessibility

Some Icons convey meaning to the user, while others are for presentation only. The examples below show what code to add depending on use.

Icon Used for Presentation in a HTML Heading

In this example we don't want the icon to be described because it does not convey any additional meaning to a screen reader.

Lab Title Text

<h3><span aria-hidden="true" class="fa-flask fas"></span> Lab Title Text</h3>

Icon Used to Replace a Label Title

In this example the icon needs to be described because it replaces a text label.

Email: test@lscg.ucsb.edu

<span aria-hidden="true" class="fa-envelope fas" title="Email"></span> 
<span class="sr-only">Email:</span> <a href="mailto:test@lscg.ucsb.edu">test@lscg.ucsb.edu</a>

Icon Used to Replace Hyperlink Text

In this example the Icons conveys meaning. The aria-label is added to the <a> link which provides a text description of the icon.

<p class="sample-icons">
<a aria-label="Phone" href="tel:805.893.xxxx" title="Phone: 805.893.xxxx"><span aria-hidden="true" class="fa-phone fas"></span></a> 
<a aria-label="Email" href="mailto:test@lscg.ucsb.edu" title="Email: test@lscg.ucsb.edu"> <span aria-hidden="true" class="fa-envelope fas"></span></a> 
<a aria-label="Website" href="#" title="Website: Lab Website"> <span aria-hidden="true" class="fa-globe fas"></span></a> 
<a aria-label="Twitter" href="#" title="Twitter: Test Twitter"> <span aria-hidden="true" class="fa-twitter fab"></span></a> 
<a aria-label="Publications" href="#" title="Publications: Test Publicaitons"> <span aria-hidden="true" class="fa-graduation-cap fas"></span></a>
</p>