An Introduction to Accessibility: Part 1
Accessibility is a term you’ve probably heard, but may not fully understand. This is in part because the word itself can be a bit confusing. The root word, access, makes the concept seem tied to things like passwords. If users can “access” your site, accessibility is checked off. If only it were that simple.
Web accessibility is really about a user’s ability to access your site’s content, regardless of any physical or mental impairments. The inventor of the internet, Sir Tim Berners-Lee, put it perfectly:
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
A truly accessible website is inclusive of every potential user. It covers differential abilities of all shapes, sizes, and permanence. Users who are blind have their own needs, as do users with a broken hand. There’s also overlap among accessibility groups. Users experiencing concussion symptoms can benefit from features designed to make a piece of content more accessible for users who experience seizures. Accessibility is a multi-faceted topic.
WCAG 2.0 Requirements
Like all great things, accessibility is easy to learn but difficult to master. While the individual standards aren’t that complicated, the current Web Content Accessibility Guidelines (WCAG) can be overwhelming. That’s why we’re going to break them down for you and translate some of the borderline legalese into something resembling English.
There are four main tenets of web accessibility. Your site and content need to be perceivable, operable, understandable, and robust. The WCAG standards are organized using these four principles.
In part one of our “Introduction to Accessibility” series, we’re going to focus on the first tenet: perceivable.
Perceivable
For a site to be considered perceivable, the “information and user interface components must be presentable to users in ways they can perceive.” Perception in context of the web can take many forms. For most people, perception means being able to see and read a website. But what if a user experiences visual impairments? That’s where the WCAG standards come in.
Images are a huge part of the internet experience for most users. Some images are decorative. Some are supplemental, providing an easier-to-discern example. But often times, images are vital pieces of content, essential to the meaning of the content segment.
In these instances, a text alternative must be provided. That, friends, is what the “alt” attribute is for on your images. “Alt” stands for “alternative,” meaning an alternative text description. It does NOT mean “stuff me full of SEO keywords.”
This also means that non-essential images need to be marked up in such a way that screen readers can completely ignore them. One way to do this is to leave the “alt” attribute blank. Yes, blank. It seems counterintuitive, but having purely decorative images with filled “alt” attributes can actually make your site and content harder to perceive for non-sighted users.
What about users that can see, but cannot hear? WCAG provides a few different standards. Depending on whether your content is pre-recorded, like an embedded YouTube video, or live, like a conference’s live stream, the standard differs. Pre-recorded videos should be captioned.
Alternatively, you can provide a transcript of the video below it. At a minimum, a summary of the video content should be provided. Higher standards, like AAA standard 1.2.6, call for sign language interpretations of your video content. AAA standards are not required by the law, but if you have the financial bandwidth to provide such a service, it can set your business apart in a very good way.
The perceivable principle also covers the way your content is organized. From a development context, this refers to the way a site or piece of content is marked up in HTML. Your content needs to be marked up in a way that makes semantic sense. The user should not experience content whose pieces are out of order when experienced outside of the typical browser. Each paragraph should flow one after the other, without the interruption of a sidebar or other non-content element.
This is essential for screen reader users. They experience a website in a linear fashion. While features like skip links make navigation easier, the core concept of a screen reader is to literally read the screen from left to right (or right to left in some languages).
When your content is broken up by other elements because of poor markup, the user is left confused as the reader jumps from section to section. As they likely cannot see, they have no alternative to help them better understand why the jumping is happening.
The final aspect of the perceivable principle, distinguishability, is arguably the most important. The decisions made here can affect the entirely of your brand, which is also why this is one of the most overlooked aspects of web accessibility. Distinguishability is a long word for a simple topic: can the user tell the difference between foreground and background content. This is not just a discussion. Distinguishability also covers audio and video elements.
Distinguishability takes several forms even as it relates to color. The first is making sure color is not the only way an element is distinguished as different. The clear use case here is using green for success text and red for failure text. It is important to add an additional indicator in this scenario so that colorblind users, of which red/green colorblindness is the most common, can tell the difference between the two states.
The use of color as the only indicator is a massive problem on the web. Think about all the sites you’ve been to that clearly place a premium on design. Their look is tweaked at every detail. Throughout the content, you may notice something: Nothing is underlined. That’s because the design called for links to be in a different color than the text. That’s how they stand out. It’s incredibly common, and it’s incredibly inaccessible.
The underline exists for a reason, but designers hate it because it’s ugly. There are ways to make the underline look better and be more accessible. One method is to use gradients for the underline. Another is to use borders. However you restyle it, make sure the underline stays.
Another key aspect of distinguishability is color contrast. At minimum, the contrast ratio of your content’s color to its background color should be 4.5. This ratio goes down slightly to 3.0 for larger text.
To calculate your contrast ratio, use one of the many contrast calculators available online. The issue of color contrast is one that often results in issues with your site’s design team. Brand colors tend to rule the day in these discussions, which is why accessibility needs to be taken into account when the brand colors are being decided. Fortunately, there’s also the standard fallback: black text on a white background.
Other lesser known aspects of distinguishability include background audio and video autoplay, as well as font resizing.
Font resizing is another significant accessibility issue that is often overlooked. You should never use pixel values for your font sizes. This prevents users from resizing text using their browser settings. Instead, use relative units like ems or rems. You can keep your pixel values as a fallback for older browsers, but it’s important to be forward-thinking when it comes to accessibility.
Perceivability comes first in the principles of accessibility for a reason. Many of its standards are vital aspects of an accessible website. If a user can’t perceive a site, they can’t interact with it.
Throughout this series of overview articles, we’ll discuss the other principles, but never forget this first point. You must provide all users with a way to perceive your website and content. If you don’t, you’ll lose customers and clients, often for good.
Check out the second and third installment of our Introduction to Accessibility series by clicking the buttons below!
