No More Click Here: Accessibility Best Practices for Digital Marketers
This blog post was developed from a presentation on this topic delivered by Missy Kahn, Ben Kahn, and Christopher Bayerle at the Portland Pardot User Group in February 2020.
Years ago, I was writing email copy with a line that went something like, “To download the content, click here.” My friend Missy, who was helping me edit, stopped me. She told me creating a hyperlink out of the words “click here” was not really accessible. She asked me to think about it like this: if someone pulled up only the links in my email, skipping from link to link trying to find the one they wanted, would the words “click here” help that person know what they were linking through to?
“Click here” doesn’t give the reader — any reader — context as to what lies on the other side of that link. And nondescript links like this just become a slog for people using screen readers or other assistive technology to navigate the internet.
As a marketer, a big part of your job is to create content that’s informative and compelling to a large audience. But you’re not doing your job if your work isn’t readable or listenable to all of your audience. That means considering people who are blind, low vision, or hard of hearing when you design marketing materials. And there’s a lot you can do! The information provided in this blog post is just the tip of the iceberg.
Why You Should Care About Accessibility
Statistical data gathered from the 2010 Census estimated that people with a disability represent 19% of the U.S. population. That’s almost 57 million people. And while not all of the people in this statistic rely on assistive technology like a screen reader to navigate the internet, a large number do.
And, as I said above, if you’re a marketer like me, everything you create should be accessible to as many people as possible.
But there’s another reason you should think about accessible design on the web: it’s the law. In lawsuits filed over website accessibility in the past decade, courts have ruled that inaccessible websites or apps may violate the Americans with Disabilities Act (ADA). Take this case, for example: Guillermo Robles, who is blind, filed a lawsuit against Domino's Pizza in 2016, citing his inability to order food from the company’s website or app using a screen reader. The court sided with Robles, writing, “The alleged inaccessibility of Domino’s website and app impedes access to the goods and services of its physical pizza franchises.” Dominos appealed the decision to the Supreme Court, but the court rejected the appeal, thus upholding the decision and allowing Robles’ lawsuit to move forward.
Our websites are public extensions of the organizations we work for. We need to make them accessible in the same way we make public spaces accessible to everyone.
Universal Design
What can you do to help make the web more accessible?
First, let’s talk about universal design trends that help make content more readable, and therefore inclusive.
- Use short sentences — If you’re a marketer like me, you know it’s best to vary your sentence length. This creates a rhythm that keeps readers engaged. But in general, shorter sentences are easier to understand. I love a semicolon or em dash. However, if you can turn one sentence into two, your writing might become easier to follow.
- Use simple language — The word utilize sure does sound fancy, but does it add meaning to what you’re saying? Keep it short and simple. Make it easily understandable.
- Make it scannable — Break your text up with headings, bulleted lists, and numbered text. Not only does this make it easier for people to visually scan, but it also helps assistive technology like screen readers navigate your text.
Design for Screen Readers
Let’s talk about a few simple things you can do to make your landing pages and emails accessible to your audience using screen readers. Screen readers are an assistive technology that helps blind and low-vision individuals navigate the web. They read everything on a webpage and use HTML to navigate through a page.
Check out this YouTube video demonstrating what a screen reader sounds like if you haven’t heard one before.
Imagine this: you read through to the end of a blog post and then want to choose a link from the top of the page. If you’re using a screen reader, you can have the reader recite back all the text of all the links on the page. But if the person who wrote the blog post wasn’t considering the way a screen reader functions all you might hear is: “Click here. Click here. Click here.” And you might not know which link you want.
What can you do?
- Make links contextual — Don’t just paste a URL into an email. Create a hyperlink and link to the URL. Be sure you make the link text descriptive so that someone knows what the link points to. And avoid link text like “Click Here” or “More”.
- Use buttons — Not only do buttons look slick and shiny and promote your big call to action, but they’re also often more visible than normal hyperlinks. This helps people with low vision see your link and follow through on your call to action.
- Use alt text with images — alt text refers to the property you can include with an image in HTML. A link might look something like this: <img src=”idealistlogo.jpg” alt=”Idealist Consulting”>. The text related with the alt property has two functions: it helps web crawlers contextualize your website, which helps SEO, and it also gets read by screen readers. This is a complex topic, and I recommend reading this article about alt text and accessibility best practices.
Landing Pages and Semantic Markup
If you work in Pardot like I do, you know you need to get a little comfortable with HTML and CSS. So I’m going to share a few more advanced things you should know about how modern HTML and CSS supports accessibility.
The biggest thing you need to focus on is hierarchy. <h1> text should be followed by <h2> and so on. You shouldn’t mix these up even for stylistic purposes. Users of screen readers use these tags to navigate your page, much in the way others use them to scan visually through content.
Also, if you’re coding a website, be sure to set the language in the metadata to help screen readers know what language the page should be read in. And set the page’s title as well.
On top of that, HTML5 (the most current version of HTML as of the writing of this blog post) has native functionality to make websites more easily navigable to screen readers. Use hierarchical headings and semantic markup like header, footer, article, and nav tags to help screen reader users navigate pages more easily. If you want to know more about HTML5 and accessibility, I recommend completing the freecodecamp.org module on applied accessibility.
You may not often have to interact with HTML and CSS directly as part of your job. Yet as a digital marketer and accessibility advocate, you should be familiar with some of these concepts, so as you work with website and email designers, you can expect them to return accessible products to you.
Email HTML
And when it comes to email accessibility, there’s a lot you can do. Here are some of the most useful features I found:
- Stick to the same semantic and hierarchical markup you use with your webpages. An <h2> element shouldn’t come before an <h1> element.
- Emails are generally built as tables within tables within tables. Designers should use the ARIA role=”presentation” property in your <table> tag to help screen readers understand that your table is not meant to order information but rather as a design construction. Otherwise, screen readers will read each row and cell of your table.
- If you know a little about CSS, you know we can use media queries to make our design more responsive. But also use these to make your design more accessible. Use media queries to set text size and line heights larger on mobile devices to make your text easier to read.
- Be sure to set language and title in the metadata for your emails as well.
This is really only the tip of the iceberg, and if you’re interested in learning more about email accessibility I recommend Litmus’ “The Ultimate Guide to Accessible Emails” and Email on Acid’s “Email Accessibility Best Practices”.
Captioning and Translation
When we’re designing materials like videos and podcasts, we should also keep in mind that our audience may be deaf or hard of hearing. Provide captioning to your videos and create transcripts of your podcasts to make these media more accessible. One option is to use YouTube to produce captioning automatically — it can be edited for accuracy and downloaded for use on other platforms. And services like Rev.com will produce professional transcriptions of audio files.
Also, consider interpretation and translation. If your goal is to communicate with your audience, you should be communicating in the language they feel most comfortable reading and speaking. According to census data, in 2016 more than 20% of people in the U.S. spoke a language other than English at home. If your constituents speak a language other than English, you should be recording that information on their Contact record in Salesforce, but you should also consider producing language-specific marketing materials that will better convey your message and help your constituents connect with your brand.
Conclusion
The reason I told you the story about my friend correcting me and telling me about accessibility best practices at the beginning of this post is because the web is a wild place with a wild history. It’s changing all the time, and most of us are learning as we go. I still have a lot to learn, and I think we can all do more to make the digital materials we create accessible to everyone no matter how they interact with the internet.
If you want to talk about accessibility and your Pardot assets, contact us for support.
