Last Thursday—May 18th—marked the eleventh annual Global Accessibility Awareness Day (GAAD). As they say on their site, “The purpose of GAAD is to get everyone talking, thinking and learning about digital access/inclusion and people with different disabilities.” This brings an important issue to the forefront: in an increasingly digital world, those with disabilities may find certain online activities to be challenging.
Without accessible websites, brands are missing out on connecting with a large portion of the population. According to the ADA, 25% of Americans are disabled and GAAD also mentions that globally, 1 billion people have disabilities. An inaccessible website distances your brand from a quarter of the U.S. population and an eighth of the global population.
Not only are brands missing out on connecting with these audiences, but, and perhaps more importantly, lack of accessibility further isolates a group that may already be feeling somewhat isolated. With the goal of bringing those with disabilities more into the fold, we’re going to unpack what an inclusive, accessible website looks like and, specifically, why effective alt text is a good starting point.
Features of an Inclusive, Accessible Website
According to the ADA, “Website accessibility is determined by how easily disabled people can access or benefit from the site, system, or application.” For the visually impaired, as an example, simply browsing a website can be nearly impossible without the right web features in place.
The ADA outlines the following as features of an accessible website:
- Use proper content management systems
- Make correct use of headings
- Use proper image alt attributes
- Use links unique with descriptive names
- Make proper use of colors
- Design accessible forms
- Use tables for tabular data, not formatting
- Web content should be keyboard accessible
- Use ARIA roles and landmarks only when necessary
- Have accessible dynamic content
- Enable the use of resizable text
- Create accessible content
- Use large buttons, controls, and links
“Font size and color contrast are huge for me. When accessibility guidelines aren’t adhered to, it’s hard to absorb content and stay focused.”
-Val Scrivner, Engineering Manager of Experimentation @ Iterable & Limitless Affinity Group member
There’s a lot on this list and, for us, it brought about some introspection. Certainly there are a lot of areas on our site that we can improve from an accessibility standpoint, and we’ll get there, but we can’t do it all overnight. But there are certainly some things we can do in the short-term to make a difference—and that’s how we landed on effective alt text.
What is Alt Text
As Harvard explains, “Alternative (Alt) Text is meant to convey the ‘why’ of the image as it relates to the content of a document or webpage.” So while alt text is supposed to explain an image, the way the alt text is written is crucial for accessibility.
It’s not just about accessibility either. That’s definitely a huge reason to include alt text on your site, but there’s more to it. In their explanation, Harvard continues, “It is read aloud to users by screen reader software, and it is indexed by search engines. It also displays on the page if the image fails to load, as in this example of a missing image.”
Within the code of a website, alt text lives within the image tag. So, in an example Moz provides, the alt text can be found inside the quotes after alt=.
<img src="pupdanceparty.gif" alt="Puppies dancing">
If an image doesn’t have alt text, you can also always add this alt attribute to your img tag to ensure alt text does populate. But, as we know, including any alt text isn’t as good as including effective alt text.
How to Write Effective Alt Text
Alt text should be able to serve as a replacement for an image. Without the image, and just the alt text, site visitors should be able to understand what you were trying to portray by including the image.
Moz provides some excellent advice when it comes to writing effective alt text. “If you can close your eyes, have someone read the alt text to you, and imagine a reasonably accurate version of the image, you’re on the right track.”
This advice was really eye-opening. A lot of the time brands see alt text as maybe just a keyword or the equivalent of an image title—we’re guilty of this too. But what we’ve learned is that alt text needs to provide as much value as the image itself.
The alt text for this post’s featured image, for example, is “Bespectacled man lounges on sofa while scrolling through a responsive mobile site. A transparent white Iterable logo spans the photo.”
Applications for All Channels
Whether it’s good or bad news, there’s always something to be done to improve accessibility across your brand. Every step forward here is one towards a more inclusive, accessible brand.
We have work to do, we know that. To tackle some immediate goals, we’re going to start with alt text, so from this point on, if you see blog posts, like this one, the image alt texts should be more descriptive, more helpful, and more relevant.
If you have any recommendations or suggestions on how we can make short-term—and long-term—improvements, feel free to reach out to us on social (@Iterable). We’re here to learn, listen, and change for the better.
Accessibility extends beyond just a brand’s website. It also can be applied to the various marketing channels brands can use to connect with customers. Think: accessible emails, SMS messages, and the like. So, if you’re curious how your marketing messages can adopt some of these accessibility techniques, stay tuned.