A Complete Newb’s Guide to Web Accessibility Standards

Hey there! If you've stumbled upon this little corner of the internet, it means you're interested in making your web content accessible to everyone – awesome choice! We're thrilled to have you here! In this post, we'll chat about why it's a good idea to make your website accessible, what it means to do so, and how to make those changes.

So, why should you make your site accessible?

The most straightforward answer is that you want your content to reach the widest audience possible. It doesn't make sense to exclude any group of people from accessing your content, especially when it's so easy to make it accessible.

As you might expect, making your content available to a broader audience also enhances your visibility and makes your content easier to find. It's not just about inclusion; it also makes excellent SEO sense to ensure your site is accessible. Google and other search engines will penalize you by ranking your content lower in their search engine results pages. And don’t even get us started on the legal troubles you could have if you don’t follow the standards outlined in Americans with Disabilities Act (ADA).

Now that we've covered the "why," let's dive into what it means to make your site more accessible.

There are four key principles to keep in mind on your web accessibility journey: perceivable, operable, understandable, and robust. To achieve complete accessibility, you should meet all four of these requirements. Let's explore each principle in more detail.

Perceivable

This principle emphasizes providing alternatives for non-text elements (such as images, videos, and audio) so that people using screen readers or captions can access and experience them too.

Operable

Operability means making websites user-friendly with keyboard navigation, ensuring users have ample time to read and interact with content, and avoiding content that might trigger seizures or physical reactions – please just say no to flashy lights.

Understandable

To enhance understandability, choose clear and straightforward language, organize your content logically (give thought to that organization and even test it with your users), and provide clear instructions or cues to guide users through your website seamlessly.

Robust

Robustness entails prioritizing standard, widely-supported web technologies and adhering to coding practices that ensure compatibility across various platforms, browsers, and assistive technologies. The goal is to ensure universal accessibility to your site, regardless of the user's choice of device or browser.

Now that we've covered what it means to make your site accessible, let's discuss how to implement this newfound knowledge.

Alt Text

A great starting point is to add alternative (alt) text to your images. This enables screen readers to convey image information to users. When writing alt text, describe what's happening in the image without including redundant information, like stating it's an image.

Good Example: "A playful tabby cat chasing a feather toy, mid-pounce."

Okay Example: "This is an image of a playful tabby cat chasing a feather toy."

Bad, Horrible, No Good Example:"Image_12345.jpg."

Contrast

Another way to enhance accessibility is by applying proper contrast between text and background elements. Different visual impairments may require varying levels of contrast. Two main contrast levels for accessibility standards are AA and AAA (Web Content AccessibilityGuidelines or WCAG).

AA: Minimum contrast ratios of 4.5:1 for body text and 3:1 for large header text.

AAA: Minimum contrast of 7:1 for body text and images of text, and 4.5:1for header text.

Ensuring screen readers proper contrast guarantees that all users can read your content.

HTML Tags

Lastly, ensure the proper use of HTML tags. These tags instruct screen readers on how to navigate your content's order. Maintain the correct hierarchy with <h1> followed by <h2> and soon. A jumbled order can confuse screen readers. 

‍

Now, armed with this basic knowledge of web accessibility, here are some useful tools to help you audit your site and make necessary adjustments:

Adobe.color: Check your color combinations for minimum contrast ratios for AA and AAA compliance. 

Colorblindly (Chrome extension): Simulate how people with vision impairments view your page.

WAVE: Use this auditing tool by entering your site address or the WAVE Chrome extension.

Screen Reader (Chrome extension): Understand how a screen reader navigates your page and assess how your alt text works.

Go ahead and create beautiful, accessible websites so that everyone can enjoy them! And if you want our help, give us a call (or email).