When given the opportunity to attend the 2017 Greystone.net Healthcare Internet Conference in Austin, I was excited to review the agenda and pick out my schedule for the multi-track event. One session popped out to me as a great opportunity – Boost Your Bottom Line with an Accessible Website presented by Keith Bundy, a digital accessibility consultant for SiteImprove.
When asked about the role web accessibility plays in his life, Keith, who was born blind, provided an answer in an interview on SiteImprove that helped illustrate the amazing opportunities offered by a digital revolution so many of us take for granted.
“One of the biggest [roles] is email,” Keith said. “When I worked as a vocational rehabilitation counselor, I walked back from lunch and there’d be all these pieces of paper with messages on them sitting at my door, and I’d have to go out to my secretary and have her read me the messages so that I could write down their phone numbers in Braille. Now with email, any message you get, I can get at the same time. If there’s a message for me it can easily come in email.”
The benefits of email for somebody in Keith’s position are considerable. But I can’t help but wonder if – in our day-to-day bustle as marketers, copywriters and email developers – we are underestimating or overlooking the important role web accessibility plays in the lives of the nearly 20% who are considered to have a disability that potentially affects the way they use email and the internet.
Web accessibility is a suitably wide-ranging topic, and I’ll provide some links throughout for more extensive resources. But, I’d like to focus on just a few basic characteristics that can help make your emails accessible for everyone. These suggestions aren’t just for developers. Rather they’re applicable to the non-coding designers and marketers who create and finalize email campaign design and copy long before it’s even assigned to a developer.
Using font sizes and colors to make your email legible
Screen readers, which are applications that turn text on the screen into spoken descriptions, are an indispensable tool for the visually disabled. But not everybody with a disability needs to use a screen reader. Simply using a body copy size that’s at least 14 pixels with adequate line spacing to match will greatly enhance your emails’ readability. Larger font sizes are especially useful for mobile devices, where smaller font sizes create legibility issues that might not be as apparent on desktop monitors.
Font and background colors are also important to ensure effortless legibility. The easiest solution to this is to stay in the habit of using a black, or near-black, body copy on a white background. However, color plays a vital role in design. And corporate branding guides often suggest using alternate colors for headlines and subheads. While using various hues is perfectly acceptable, it’s surprisingly easy to cross the line into what is considered a failing legibility grade by WebAIM, a non-profit organization committed to the development of accessible web content. Fortunately, this WebAIM contrast checker can help fix these accessibility issues.
Alternative text for images and captions for videos
While an image can be worth a thousand words in conversation, on the web, we have just 140 characters. Alternative text (referred to as “alt text”) is the term used to describe otherwise hidden copy that can be viewed in lieu of an image (if the user has email images disabled, for instance) or read aloud by a screen reader to describe an image’s meaning to the user. Creating alt text is not as simple as describing the image in full. Rather, context and function also need to be considered. A generic stock image of an unknown person at a computer that accompanies a story about your new website might not require any alt text at all if it doesn’t add any context to the story. However, if the image is of an actual employee demonstrating a particular function on the website, alt text describing such could be beneficial to the user. Finally, if the image also contains a hyperlink, describing that link’s function would also be appropriate. However, visible captions below images are a proper alternative to alt text. WebAIM has a great guide for writing alt text.
Since most email applications don’t yet support the playing of videos or sound within email campaigns, we haven’t had to consider the hearing disabled. But if you are sending users to a video that plays in their web browser, it’s imperative the video contains proper captioning. Videos hosted on YouTube can easily have captions added to them.
Move beyond the “Click here” and “Read more” calls to action
In the early days of the internet, “click here” became the de facto method for informing a user that they can click with their mouse on some text to visit another web page. At its best, a phrase like “click here” is technologically outdated in our increasingly mouse-less world. At its worst, it’s completely void of context. Screen reader users often scan pages by commanding the screen reader to read back the links – essentially looking for the call to action like most email users. Having “Click here” or “Read more” repeatedly read back to them is not helpful. As a result, it’s imperative hyperlinked text or buttons are descriptive enough to provide context. Watch a quick YouTube video featuring a screen reader demonstrating non-descriptive and descriptive hyperlinks.
While basic text links are acceptable, be sure to reiterate your most important calls to action with large buttons and descriptive text. Instead of a tiny, “Read More” text link at the end of a paragraph, try to design for what we developers lovingly refer to as a Big Fat Button. These buttons will benefit everybody from desktop users who have trouble with precise mouse clicks to most of your mobile recipients with smaller screens.
Keith Bundy’s HCIC session that day in Austin was as impactful as I hoped it would be. He demonstrated what it means to be a web user with a visual, motor or auditory disability and how a screen reader works. As he referenced various subtleties that play big roles in accessibility, Keith helped move web accessibility to the forefront of my mind and into the foundation of my development practices. But, as a web and email developer, I’m just the last line of defense and execution. Web accessibility should be considered at each step of a campaign’s development. At its core, it’s about emphasizing clarity, specificity and ease of use – all essential building blocks for a positive user experience.
If you have tips for improving email campaign accessibility, please share in the comments below.
As a web designer and developer, Jonathan keeps his ear close to the ground for the latest in web advancements and best practices. Always designing with the end-user in mind, Jonathan presents unique contemporary web sites and emails that reinforce branding standards. Before joining LionShare in 2011, Jonathan spent five years designing and developing both print and digital media. His more specialized role at LionShare helps feed his desire to become an efficient master of web and email development. To learn more about sending successful email campaigns, please contact us at 1-800-928-0712.
Comments