In web design, digital production, and well any kind of marketing really, we sure do love our acronyms: EOD, ROI, TTYL, RFP, HAKAS, and one you’ve likely heard of, ADA. The Americans with Disabilities Act or ADA, covers more than you might expect. It’s not simply providing guidelines for physical access, although it does that too, the act also governs persons with disabilities’ digital interactions. Visual, auditory, and processing disorder disabilities are all factors we must consider when designing for the web. After all, we don’t want our projects to be DOA, that’d be a real PITA.
Accessibility in the design process
Accessibility and inclusion are values we should all care about, in design or otherwise. Empathy must be central to our decisions in all things design. We talk a lot about empathy-based user stories or journeys wherein we assume the role of the user and empathize with their position and needs. That extends beyond people that are able-bodied or look and act like us. Disabilities often don’t present themselves in ways that you might expect, many are invisible to others.
We’ll cover how to address these needs but first let’s discuss the why, beyond simply being the right thing to do. While ADA in its original form was passed into law before the modern internet existed, recent cases have concluded that access must be granted to all those in need of goods or services. What does that mean for your business and website? Well, there’s not a one-size-fits-all answer to that question. Does your business also operate a brick and mortar establishment? Are you publicly funded? If yes, then there’s legal precedent that ADA accommodations must be met on your website. In fact that same precedent has also awarded $55,000 to $75,000 to complainants. That’s some fat stacks you could be responsible for if you’re not in compliance. Need another benefit? Good accessibility practices actually increase your SEO ranking.
“Okay, I see your point designman, now what?” Excellent question, dear reader. There’s a set of guidelines we follow in order to achieve certain accessibility rankings. Now bear with me, this gets a bit wordy. The guidelines are known as WCAG or the Web Content Accessibility Guidelines. Those very same guidelines are published by the Web Accessibility Initiative of the World Wide Web Consortium otherwise known as the W3C. Al Gore never really stopped inventing the internet, did he?
WCAG and its levels (no boss fights)
We’re going to focus solely on the Web Content Accessibility Guidelines, or WCAG. In order to make sure you’re with me here we need to practice this pronunciation. We like to pronounce it wuh-cag. The cag is said like your Aunt Evelyn in Minnesota was trying to pronounce cog, ya really gotta emphasize that short a sound in the middle. Go on, say it out loud, it’s fun.
WCAG offers 3 distinct levels of accessibility in increasing levels of accommodations. Those are A, AA, and AAA. The first two levels, A and AA are the most commonly applied across the web as you experience it today. In fact AAA is rarely followed in its current form, because of that we’ll focus on level A and AA respectively.
Level A
Level A is the most basic level of web accessibility as defined by WCAG. In fact, we guarantee compliance with level A in every project here at LimeLight. Level A mandates features such as alt-text on all images, skip-navigation functionality, <strong> and <em> tags for parsing, and captions on all audio and video content on the site.
Level AA
Level AA includes all accommodations within Level A and adds a higher level of requirement for accessibility. Specifically, a color contrast ratio of 4.5:1, suggestions to resolve input errors, and a consistent user experience at 200% browser scale or zoom level. It’s that last guideline that is most often missed when designing for Level AA compliance.
Alt Tags and you
An easy pitfall when thinking of alt tags or text (alternative tags or text that describes the highlighted element or image for use in screen reader programs) is to think of them purely from an SEO (look, more acronyms) perspective. As stated there’s an SEO benefit to accessibility, often specifically around the usage of alt tags. In fact, your SEO could take a hit if your alt tags aren’t utilized properly or worse, missing entirely. Then how do we properly and accurately write alt tags with screenreaders top of mind rather than SEO? Well, dear reader, I don’t know. Blog over. Kidding, of course.
Alt-Tag best practices:
- 5–8 descriptive words, no flavor text or brand names
- Keep it simple and on topic
- Consider the role the image is intended to play on the site and use that context in the verbiage.
- Install a screenreader (or use your browser’s built-in one) and parse your design
Let’s implement some of those best practices in an example:
We’ll employ all of our alt-text best practices with the above image in a few different contexts:
Image with supporting body copy: Brooklyn Bridge spans toward Manhattan.
Page about architecture: Brooklyn Bridge’s iconic stone towers and boardwalk.
Page about commuting: Empty Brooklyn Bridge devoid of commuters.
The context is key in how we describe the image, but we remain short and to the point in order to not overwhelm a user exploring our site with a screenreader. We recommend Chrome’s built-in screenreader that you can install here. If you’re on a Mac you can also press Command + F5 to turn on Mac OS’s built-in reader; on Windows you can press the Windows key + Control + Enter.
Is your brand ready to be accessible?
WCAG levels and alt-tags are just a couple of the steps in our entire process meant to illustrate our overall commitment to accessibility for all. In fact, we have three dedicated staff members that are certified ADA experts ready to help you.
LimeLight takes our commitment to accessibility seriously, when we say we approach our designs with empathy, we mean it. Our designs aren’t guaranteed to be WCAG A or AA compliant due to a threat of legal action but instead because we truly care about all needs of the user, no matter their subjective demographics, abilities, or other factors. We care about the user as a human being, not an abstracted caricature. If we design to the needs of the human, accessibility comes naturally.
Are you ready to upgrade your site to be accessible, or perhaps begin anew with accessibility top of mind? We’re here to help and ready to talk.
