{"id":20929,"date":"2023-02-21T13:05:00","date_gmt":"2023-02-21T19:05:00","guid":{"rendered":"https:\/\/theadminbar.com\/?post_type=accessibility-weekly&#038;p=20929"},"modified":"2024-02-10T06:59:54","modified_gmt":"2024-02-10T12:59:54","slug":"font-awesome-and-icon-fonts-accessibility","status":"publish","type":"accessibility-weekly","link":"https:\/\/theadminbar.com\/accessibility-weekly\/font-awesome-and-icon-fonts-accessibility\/","title":{"rendered":"Font Awesome and Icon Fonts Accessibility"},"content":{"rendered":"\n<p>Imagine this scenario: you found an excellent resource for your next article. You want to thank the author and tag them when you share it, so you look for their Twitter account. You find the Twitter logo at the bottom right corner of their website. You click on it and are immediately redirected to their Twitter. Easy enough.<\/p>\n\n\n\n<p>But what if you were using a screen reader? Would you still get the same experience? Probably not.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why Icon Font Accessibility Matters<\/strong><\/h2>\n\n\n\n<p>Linked icons, often created with icon fonts such as Font Awesome, are commonly used in user interfaces for websites and mobile applications. Icons are used to represent various functionalities, such as navigation controls, social media links, search bars, and menu items. Icon fonts can also used for indicating status or providing visual feedback to users, such as warning signs or confirmation symbols.<\/p>\n\n\n\n<p>Because icons have the potential to communicate a wide range of important information, it&#8217;s crucial that they are accessible to as many people as possible and can be understood when using a screen reader or other assistive technology.<\/p>\n\n\n\n<p>Icons are utilized in two ways across websites, apps, and other digital interfaces, and how they are handled from an accessibility standpoint depends on how that icon is used &#8211; whether it\u2019s decorative or functional in a link or button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Decorative Icon Accessibility<\/strong><\/h2>\n\n\n\n<p>If you&#8217;re utilizing an icon for decorative or branding purposes, there&#8217;s no need to notify screen reader users that the icon is there. Here are examples of how an icon might be used that is considered decorative:<\/p>\n\n\n\n<ul>\n<li>A three-column section on the home page that contains an icon, page title, and blurb linked to other pages on the site.<\/li>\n\n\n\n<li>An arrow pointing to the right next to a \u201cRead More\u201d link.<\/li>\n\n\n\n<li>Icons added as a background images behind or near text.<\/li>\n<\/ul>\n\n\n\n<p>If the icon is used to highlight or style content already present in your HTML visually, it doesn&#8217;t need to be reiterated for users relying on assistive technology.<\/p>\n\n\n\n<p>When an icon is added to the website purely for decorative purposes, it should be concealed from screen readers so that they will skip the icon and not read it out. No needs to hear \u201cRead more about us. Graphic. Right pointing arrow,\u201d for example. It\u2019s unnecessary clutter that distracts from the point of the content.<\/p>\n\n\n\n<p>If you have decorative icons on your site, the best way to make them accessible is to hide them from screen readers completely with <a href=\"https:\/\/theadminbar.com\/accessibility-weekly\/aria-hidden\/\">aria-hidden=\u201dtrue\u201d<\/a>. Here is an example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"\/about\"&gt;Read more about us &lt;i aria-hidden=\"true\" class=\"fas fa-arrow-right\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Icons on Buttons or Links<\/strong><\/h2>\n\n\n\n<p>If you&#8217;re using an icon on a button or link, it\u2019s crucial to ensure the purpose of that button or link is communicated to users through text-based alternatives. This applies to abbreviated content (such as shopping cart status or a number of unread messages) and interactive controls (such as buttons, form elements, and toggles).<\/p>\n\n\n\n<p>In our website audits, failure to provide an accessible label is one of the most common problems that we find, especially when an icon font is being used. Going back to the example we opened this article with, here\u2019s an example of an <em>inaccessible<\/em> (I.e., bad) linked icon:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"&lt;https:\/\/twitter.com\/heyamberhinds&gt;\"&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n<\/code><\/pre>\n\n\n\n<p>A sighted person would see this as a link to Twitter but if a screen reader encountered this it would just read out \u201cLink\u201d with no additional information. In Equalize Digital Accessibility Checker, you would see this flagged as an Empty Link Error.<\/p>\n\n\n\n<p>There are two ways to fix this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add Screen Reader Text to Icon Fonts<\/h3>\n\n\n\n<p>You can add <a href=\"https:\/\/theadminbar.com\/accessibility-weekly\/adding-theme-support-for-screen-reader-text-and-ideas-for-using-it\/\">hidden screen reader text<\/a> before or after the link to add context for screen readers only.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"&lt;https:\/\/twitter.com\/heyamberhinds&gt;\"&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;span class=\u201dscreen-reader-only\u201d&gt;Amber\u2019s Twitter Profile&lt;\/span&gt;&lt;\/a&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Use an ARIA Label<\/h3>\n\n\n\n<p>You can add an aria-label to the link to add context for screen readers only.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"&#91;&lt;https:\/\/twitter.com\/heyamberhinds&gt;](&lt;https:\/\/twitter.com\/heyamberhinds&gt;)\" aria-label=\u201dAmber\u2019s Twitter Profile\u201d&gt;&lt;i class=\"fab fa-twitter\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Additional Resources for Accessible Icon Fonts<\/strong><\/h2>\n\n\n\n<p>Here are some additional resources for reading more about accessibility in icon fonts.<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/fontawesome.com\/docs\/web\/dig-deeper\/accessibility\" target=\"_blank\" rel=\"noreferrer noopener\">Font Awesome Icons and Accessibility<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/aria\/ARIA24\" target=\"_blank\" rel=\"noreferrer noopener\">W3: Semantically identifying a font icon with role=&#8221;img&#8221;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.24a11y.com\/2017\/svg-icon-fonts-accessibility-case-study\/\" target=\"_blank\" rel=\"noreferrer noopener\">SVG, Icon Fonts, and Accessibility: A Case Study<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=_2nry9Tkf90&amp;t=5s\" target=\"_blank\" rel=\"noreferrer noopener\">Font Awesome Accessibility Example YouTube video<\/a><\/li>\n<\/ul>\n","protected":false},"featured_media":20930,"template":"","banner":[],"acf":[],"_links":{"self":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/accessibility-weekly\/20929"}],"collection":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/accessibility-weekly"}],"about":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/types\/accessibility-weekly"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/media\/20930"}],"wp:attachment":[{"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/media?parent=20929"}],"wp:term":[{"taxonomy":"banner","embeddable":true,"href":"https:\/\/theadminbar.com\/wp-json\/wp\/v2\/banner?post=20929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}