Accessibility the Awesome Way: Making Icons More Accessible to Screen Readers

FontAwesome is awesome for everyone, right? Well, not so much if you are a screen reader user… We took on a mission to make FontAwesome even more awesome for a client. 

As a mission-focused organization, we want to make browsing the internet an experience that is available to everyone regardless of ability. So when our friends at Pantheon referred Georgetown University’s McDonough School of Business to us to help resolve issues their internal accessibility audit had flagged, we were more than happy to take on the project. 

What is accessibility remediation and what does it mean? The School of Business had a staff portal built off of a popular Drupal distribution, Open Atrium, which they wanted to make sure was usable to people who might otherwise have difficulty accessing a website. This can include people who are blind, sight-impaired, permanently or temporarily physically handicapped, people with cognitive disabilities, or any number of other impairments. 

In addition to the United States having documented standards for accessibility compliance Georgetown University has their own accessibility standards and criteria that the School had to meet with their website. The University standards mandate that their website be compliant with WCAG 2.0 A standards, but strive to meet WCAG 2.0 AA standards for better accessibility compliance.

While a variety of tools can be used to document and assess a website's general level of accessibility compliance, we were very happy to make use of the client’s existing Siteimprove subscription to generate a list of problems ranging from A to AAA. From there, our team created a plan to assess and tackle the issues.

One of the most prevalent issues was the use of <i> tags throughout the site. If you are familiar with HTML you might be wondering what is wrong with italics? Well, there’s nothing wrong with italics, if they are being used properly by giving emphasis to text-only content. In this case it was being used to place FontAwesome icons on the website. FontAwesome is a service that provides free icons for the web, however the service utilizes the <i> tag to add these icons to the site. 

For blind or low vision users who use screen readers to read the content of the page out to them this is not a great thing. Why? Icons are often used to convey meaning in lieu of text. When you depend on an icon to relay meaning and part of your audience can’t understand or see that meaning, they lose context. Without context, your user is lost on your page and your content is meaningless. Icons of this type are called semantic icons. Icons that are being used solely for decoration are called decorative icons. In the case of our client we needed to discern which icon was which type, and make sure the icons that were conveying meaning had associated text that a screen reader could read. We did this by evaluating each icon, employing screen reader only text, and adding aria-hidden attributes to tell screen readers to ignore a non-essential part of the screen. 

Once these modifications were made and on the client’s test environment the Kalamuna team was able to QA the content and make sure the issue had been resolved. We did that by manually testing with screen reader software (ChromeVox, JAWS, TalkBack) and re-running the Siteimprove scan to ensure that we had fixed it without any remaining complications. 

In keeping with the spirit of the open source community, we have submitted many of our fixes to the Open Atrium project on Drupal.org. Developing websites that can be used by everybody just leads to a better web experience for everybody (notice our proper use of the <i> tag here? ;-) ). This is one of the many reasons why we were excited to take on such an interesting project that could have a community-wide impact in addition to the client-impact we already see.