Fixing Inaccessible Local Footer Icon-fonts

The WebAudit tool has recently began scanning for inaccessible use of icon-fonts in the website's local footer region. Inaccessible icon-fonts in the local footer can severely impact your WebAudit score since it appears on all of your website pages. We covered the accessibility considerations of using icon-fonts in the Framework documentation. We will look at determining if WebAudit picked up that your website has an inaccessible icon-font in the local footer region and how to remedy it.

Do I have Inaccessible Icon-font present in the Local Footer?

You can look at the errors reported in the UNLedu Framework Checker area of the Hot Spots section within WebAudit to determine the presence of inaccessible icon-font on your website. If inaccessible icon-fonts are found, you will see something like this:

screenshot of webaudit report showing presence of inaccessible icon-fonts
Screenshot of WebAudit report showing the presence of inaccessible icon-fonts

Note: Your WebAudit score might be at 100% and it might show you that there are no errors in the UNLedu Framework Checker area. That's great, but it can also mean that your WebAudit tool hasn't been ran since the new detection has been put in place. We highly recommend you do a new site scan to make sure that your score is current and valid.

What the screenshot is telling us is that WebAudit has found inaccessible icon-fonts on your website. You will have to delve deeper into each error to determine if these icon-font errors are present in your website's local footer region. The Icons documentation page talks about handling accessibility issues when using icon-fonts. Read on if you do use icon-fonts in your website's local footer.

Fixing Icon-fonts in the Local Footer Region

There are two parts to the fix, HTML and CSS.

HTML

Copy the lines of code that you need into the contact information block of your local footer and replace the highlighted portions with your own information:

<!-- Physical Address -->
<p class="icon-container"><span class="wdn-icon-location" aria-hidden="true"></span><span class="wdn-text-hidden">Address</span>street address<br /> city, state zip-code</p>

<!-- Phone Number -->
<p class="icon-container"><span class="wdn-icon-phone" aria-hidden="true"></span><span class="wdn-text-hidden">Phone number</span><a href="tel:phone number">phone number</a></p>

<!-- Fax Number -->
<p class="icon-container"><span class="wdn-icon-print" aria-hidden="true"></span><span class="wdn-text-hidden">Fax</span>fax number</p>

<!-- Email Addresss -->
<p class="icon-container"><span class="wdn-icon-mail" aria-hidden="true"></span><span class="wdn-text-hidden">Email</span><a href="mailto:email">email</a></p>

<!-- Social Media: Facebook -->
<p class="icon-container"><span class="wdn-icon-facebook" aria-hidden="true"></span><a href="Facebook link">FacebookHandle<span class="wdn-text-hidden"> on Facebook</span></a></p>

<!-- Social Media: Twitter -->
<p class="icon-container"><span class="wdn-icon-twitter" aria-hidden="true"></span><a href="Twitter link">@TwitterHandle<span class="wdn-text-hidden"> on Twitter</span></a></p>

<!-- Social Media: Instagram -->
<p class="icon-container"><span class="wdn-icon-instagram" aria-hidden="true"></span><a href="Instagram link">InstagramHandle<span class="wdn-text-hidden"> on Instagram</span></a></p>

CSS

The following CSS provides the styling for the HTML you copied earlier. You can add the CSS to your stylesheet or if you are using UNLCMS, add it under Appearance > Settings > CSS section.

/*Footer Icon container CSS*/
#footer .icon-container {
position: relative;
padding-left: 1.777rem;
}

#footer .icon-container [class*="wdn-icon-"] {
position: absolute;
left: 0;
}

Conclusion

There are accessibility considerations when it comes to using icon-fonts since some screen readers will try but fail to convey them to the site visitor. The fix will provide a text substitute for these icon-fonts so that the site visitor is aware of the meaning of the following pieces of information that is going to be conveyed.

Comments

raiken2's photo

Is there any way that when a new site is created in UNLcms, the placeholder content can have the aria-hidden="true" and wdn-text-hidden on the appropriate elements?

erasmussen2's photo

It's been added now

Pages