Font Awesome

Description Typical Location	Type	Input Method	Example	UI and ADA Checklist
Stand alone icons in the header or footer	Semantic	HTML Manual		correct link opens in a NEW tab has aria-label color contrast is responsive
Stand alone icons in the header	Semantic	HTML Manual		correct link opens in the SAME tab if on the same website has aria-label color contrast is responsive
Slideshow Controls Home page	Semantic	Soliloquy module Automatic		color contrast position is responsive
Pagination Home News	Semantic	Divi module Automatic		color contrast position color contrast is responsive
Social Icons on a text button	Decorative with text	CSS Manual		color contrast is responsive
Quicklink icons in the header	Decorative with text	CSS Manual	Community	color contrast is responsive
News Articles Decor on home and events pages	Decorative with text	CSS Manual	Article	color contrast
Toggle FAQ etc.	Decorative with text	Divi module Automatic	Hour?	color contrast

Semantic Icons

Semantic icons convey meaning to the user. These icons prompt the user to interact with the icon such as links to social media, buttons, and other interactive controls or links. Semantic icons must meet ADA requirements which include having an aria-label, so they are added with html.

• <a></a> The anchor tag or ‘a’ tag creates a link on a webpage. Whatever goes <a>IN BETWEEN HERE</a> will be the link on the page. That is often text, but in the case of a social icon, we will put an <i></i> inside like this, <a><i></i></a>.
• href stands for hypertext reference. The href is an attribute of the ‘a’ tag and includes the url (web address) to where the link will take the user. The href can even take a user to a specific place on a page, even on the same page.
• target is an attribute of the ‘a’ tag. Set the target to equal ‘_blank’ when a link will take the user to an external website or document. Set the target to equal ‘_self’ when the link is internal (on the same site).
• aria-label is an attribute of the ‘a’ tag. The words within an aria-label should convey the meaning of what will happen when the user clicks on the link. Screen readers read aloud the text within the aria-label so that the visually impaired will know what the purpose of the link is. An aria-label is required for links without text.
• rel=’noopener’ is an attribute used in the <a> <area> and <form> tags for security purposes. This attribute helps prevent hacking by instructing the browser to navigate to the new website without granting access to the source that opened the link.
• <i></i> sematically, the ‘italic’ tag or ‘i’ tag is meant to turn text to italic, Like this, but most web designers use css for that. FontAwesome uses empty ‘i’ tags in the html for semantic icons in conjuction with css.
• aria-hidden=’true’ is an attribute of the ‘i’ tag. This attribute is used to hide an element from assistive techonologies like screen readers. It is used to prevent confusion, i.e. by hiding the empty ‘i’ tag that is used to add an icon with html, the screen reader will ignor the empty ‘i’ tag and depend on the aria-label in the ‘a’ tag to convey the purpose of the icon link.

Decorative Icons

Decorative icons are ones that are used for the sole purpose to visually enhance a website and does not add information that is not already on the website. Decorative icons are exempt from ADA requirements. Therefore, they do not require an aria-label and can be added with CSS.