Web accessibility: What you need to know about WCAG

Luckily, every day web accessibility is becoming increasingly important, and laws and regulations are helping people with disabilities navigate the internet more comfortably. However, many marketers are still unsure how to approach it; some are trying, but not always in the right way as they consciously disregard its true purpose.

In this article, we'll cover everything you need to know about web accessibility and the WCAG to guide you through the first steps to make your website accessible for everyone.

What we meant when we talk about web accessibility?

Web accessibility is the practice of designing and coding websites so people with disabilities can access, navigate, understand, and interact with them effectively. This practice requires both technical expertise and a strong understanding of user needs, as accessibility is not just about meeting standards.

When we talk about web accessibility, we mean ensuring that people with visual, auditory, motor, neurological, speech, and cognitive disabilities can use a website without barriers. For example, users who rely on screen readers should be able to interpret content through properly structured HTML and alternative text. Individuals who cannot use a mouse should be able to navigate entirely via keyboard. Videos should include captions for users who are D/deaf or hard of hearing.

Before, there weren't any laws, regulations, or standards regarding web accessibility, so it was very rare to find accessible websites. However, over time, institutions and governments began recognizing the importance of digital inclusion, and accessibility is now required in many countries through national legislation. In the United States, for example, compliance with the ADA and Section 508 is mandatory for certain organizations and public entities.

Other countries have their own legal frameworks and regulations that define accessibility requirements, so to understand what applies to your website, you should review the legislation in your specific country or consult with a legal expert familiar with digital accessibility laws.

That said, we always recommend following the guidance provided by the World Wide Web Consortium (W3C) through its WCAG even though access is not mandatory in your territory. By aligning your website with WCAG, you not only move toward legal compliance in many regions, but you also create a more usable and inclusive experience for all users that often benefit from improved SEO, better performance, clearer structure, and an overall higher quality user experience.

What's the WCAG?

The WCAG stands for Web Content Accessibility Guidelines (WCAG) and it's, as its name suggests, a guideline made by the World Wide Web Consortium (W3C) that 'defines how to make web content more accessible to people with disabilities.'

This internationally recognized framework address web content accessibility and it has three levels of compliance: Level A, AA, and AAA, being the last the maximum and better accessibility a website can achieve.

The guideline is divided into four main principles called POUR, which are the initials of: perceivable, operable, understandable, and robust. This division helps organize accessibility requirements depending on how users perceive, interact with, process, and rely on web content through different senses and abilities.

• Perceivable means that users must be able to perceive the information being presented. For example, images should include alternative text for blind and low vision individuals to perceive/access it.
• Operable means that users must be able to interact with your site. This includes making all functionality available via keyboard and giving users enough time to read and use content.
• Understandable means that both the information and the operation of the user interface must be clear and predictable. For example, the way information is displayed should be put in a logical and consistent structure.
• Robust means that content must be compatible with different browsers (Chrome, Safari, etc.), devices (desktop, mobile, etc.), and assistive technologies (screenreaders, for example), ensuring it remains accessible as technologies evolve.

Why should you implement web accessibility?

Around 16% of the global population has a disability and many of them rely on access features to navigate websites. Deaf, blind, or people with intellectual disabilities, among others, can benefit from web accessibility. As a website owner, you should consider them as potential users, because everyone has the right to access information, just like anybody else.

Moreover, as governments and search engines increasingly focus on accessibility, implementing it can bring more benefits than you might expect. Among the most important are:

• Improved UX: Having an accessible website isn't just beneficial for people with disabilities. Most (if not all) of the features required for accessibility are inherently user-friendly and can make interacting with your content easier and more comfortably. For example, reading a transcript instead of watching a video allows users to quickly search for specific information. By implementing web accessibility, you enhance the overall user experience, which can lead to better analytics results, including higher engagement and increased conversion rates.
• Increase on users: By making your website accessible, you reach a portion of society that often struggles to use other websites. This means more potential visitors, customers, or readers can engage with your content, expanding your audience and increasing your overall reach.
• Better SEO: Search engines like Google are increasingly focusing on accessibility. To encourage website owners to make their sites accessible, they prioritize websites that include access features such as alt text and even offering web accessibility courses. Additionally, just like with UX, implementing accessibility features makes it easier for search engines to crawl and understand your website's content. This can improve indexing, increase your visibility in search results, and ultimately drive more organic traffic to your site.
• Compliance with laws and regulations: As mentioned above, there are currently laws and regulations that require website owners to provide a minimum level of access for people with disabilities. Being compliant helps you avoid potential legal issues or fines.
• Improved brand reputation: Last but not least, having an accessible website demonstrates a commitment to inclusivity and social responsibility. This not only builds trust with your audience but also improves your brand's reputation.

How to be compliant with the WCAG?

Being fully compliant with the WCAG requires a lot, as it is a general guideline covering almost all aspects of web accessibility; but you can choose between the three levels:

• Level A being the minimum and easiest to meet; it covers only the most basic accessibility features to remove critical barriers.
• Level AA being the recommended standard, which requires more commitment as well as expertise than the first one. It must be noted that, even though laws and regulations make this the mandatory basic level, rarely any website is fully compliant with it.
• Level AAA being the maximum level and the hardest one to meet, as it's quite strict and technically challenging, covering advanced accessibility features that go beyond basic needs.

For example, if you want to be compliant with Title II of the ADA, Section 508, you can do it by following WCAG version 2.1 or 2.2 at Level AA. That's why, even though WCAG itself is not a law, we always recommend following it as a starting point to make your website accessible.

But, where to start? Well, these are the basics:

Alt text

Alt text is a text attribute that describes the content or function of an image so that users who cannot see it can still understand what it represents. This feature is crucial for blind and low-vision users, as it allows them to access the visual elements of a site through screen readers or other assistive technologies. Understanding this is key, because some marketers have been using alt text solely for SEO purposes packing this feature with keywords and neglecting its main goal. Please, don't do that …

If we look at what the basic level says about this, the main guidelines are: all meaningful images must have descriptive alt text, decorative images should have empty alt attributes (alt="") so they are ignored by screen readers, and images that convey important information through text or visuals must include that information in alt text or nearby text.

We recommend writing alt text in a clear, concise, and accurate way: describe the purpose of the image, its appearance when the visual detail is important, and avoid stuffing keywords as that's not a description but a wrong way of using alt text and, it won't work for SEO anyway. And, of course, test your site with a screen reader to make sure the alt text communicates the right information.

Keyboard navigation

As we mentioned before, some people can't use a mouse to navigate a website and need them to be fully navigated with keyboards. This is why it's crucial that as WCAG states:

'all functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.'

If we look at what the basic level says about this, the main guidelines are: users need to be able to move into something like a button, form field, or menu item, and move out again using the keyboard alone and, if you have keyboard shortcuts to navigate your site, users must be able to turn them off, change them, or only use them in the right context. To do so, we recommend structuring your site in a logical, sequentially, and simple way to make this easier: don't overload pages with too many interactive elements, keep navigation consistent, and, of course, test it yourself using only a keyboard to ensure it's easy to access everything.

To check it, try navigating your site with Tab, Shift + Tab, arrow keys, and Enter only. If you get stuck or can't reach something, you need to adjust the structure or keyboard interactions.

Color contrast, font size and readability

For users with sensory or visual issues, the way your website presents information can make a huge difference in accessibility. This includes elements like shape, color, size, visual location, orientation, or sound, all of which help users perceive and understand content.

Regarding the use of color, for example, it should never be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element as it is recommend to support it with other types of info. For example, don't rely solely on red text to indicate an error; pair it with an icon or a text label so everyone can understand it.

Reading can sometimes be challenging when elements on a page lack sufficient contrast or when font sizes are too small. To make your content more accessible:

• Ensure high contrast between text and background, with a white background and dark text color being the standard.
• Use readable fonts (sans serif fonts are easier to read) with a proper size (more than 12px) and sufficient line spacing to make text clear, legible, and easy to follow for all users.
• Combine color with other visual cues like shapes, patterns, or text labels to convey meaning.

We recommend structuring your visual content in a clear and predictable way: avoid overcrowding pages, maintain consistent styles, and test your site with different contrast settings or by viewing it in grayscale to make sure all information is still distinguishable.

Understandable content

If this is not our first article you read, you will know that we talk A LOT about structured content. AI and search engines value it, but it also makes access easier for people with a variety of disabilities, like visual or cognitive impairments.

The content you provide on your site must be displayed in a structured way, easy to understand, and presented so that it can be programmatically determined or available as text. This includes headings, labels, instructions, and any other information users need to interact with your site.

If we look at what the basic level says about this, the main guidelines are: web pages should have titles that describe the topic or purpose, headings should be used to organize content logically, instructions and labels should be clear, and the language should be simple and consistent.

We recommend structuring your content in a logical, sequential, and simple way: don't overload pages with too much information at once, break content into sections with headings, and use lists or tables where appropriate. And, of course, test it yourself! Try reading your page aloud or using a screen reader to make sure everything is understandable. Additionally, use our Heading Extractor to see how the information is presented and if it follows that hierarchical structure.

Other basic practices to comply with level A (WCAG)

Besides the features mentioned above, if you review the complete WCAG guideline, other practices to comply with Level A (the most basic level, which alone does not ensure ADA compliance) include the following:

• Regarding media content, whether it is audio only, video only, or a mix of both, Level A states that access features must ensure any missing information is provided, or at least a media alternative is available. In other words, you must provide captions and audio descriptions for video, as well as transcripts for audio-only content. The only exception to skip this is when the media serves as a media alternative for text and is clearly labeled as such, for example, by indicating it in text or heading ('Video contains the same content as the article text' or 'Text Alternative: Audio Version').

• Continuing with audio, audio controls are something that can be annoying for everyone, but even more so for people with disabilities. If any audio on your website plays automatically for more than 3 seconds, you should provide a way to pause or stop it, or at least control the volume independently from the overall system volume. This is important because automatic audio can conflict with assistive technologies, such as screen readers, and may also be uncomfortable for neurodivergent users. We recommend avoiding this type of media altogether, whether it's audio or video.

• Users must be able to pause, stop, or hide any moving, blinking, scrolling, or auto-updating content that starts automatically, lasts more than five seconds, and is presented alongside other content.

• Regarding people who suffer from seizures, web pages mustn't contain anything that flashes more than three times in any one-second period, unless the flash is below the general flash and red flash thresholds. Exceeding these limits can trigger seizures or other adverse reactions in sensitive users.

• Repeated blocks on websites, like headers, footers, or sidebar links, which appear on many pages, should be skippable. Going through the same menu or links every time a user visits a new page can be frustrating and time-consuming. Imagine being blind and using a screen reader to access a website, each time you open a new page, it reads the same content again and again. A mechanism should be available to skip or bypass those repeated blocks of content, allowing users to access only the main content on each page.

• When adding internal and external links, the text of the link should clearly tell the user where it goes or what it does. A "Read more" link doesn't say anything about where the user is heading, but if the link is an article about how cats interact with humans, you could write "guide about cats behavior with humans" or "Read more about how cats interact with humans" instead. This way, the link is descriptive on its own, and users (especially those using screen readers) can understand its purpose without needing extra context.

• This is more related to website access with touchscreens, but it also applies to any functionality that uses multipoint gestures (like pinching with two fingers) or path-based gestures (like drawing a shape or swiping a pattern) the rule is: anything that can be done with these complex gestures should also be possible with a single pointer like one finger, a mouse click, or a stylus unless the gesture is absolutely essential for the function.

• If you have a multilingual site, each page should clearly specify its default language in the code. This helps assistive technologies, like screen readers, know how to read the text correctly. To do so, it's essential to use the lang attribute on your <html> tag, which will specify the language.

• If a user interacts with an element of your site like a button, dropdown, checkbox, or link it should not unexpectedly take them to a new page, pop up a new window, or jump to a completely different part of the site without warning the user first. In other words, if there's a button that will redirect to another page, the user should know what will happen before they click it by explaining it in the text (as we mentioned before with links) or by providing clear instructions nearby, such as a tooltip, label, or descriptive hint.

• Regarding forms or any situation where users fill out information on your website like buying a product or subscribing to a newsletter your site must automatically detect errors and clearly tell the user what the problem is, so that users with disabilities can identify and fix it. For example, imagine you are filling out a form to subscribe to a newsletter and you enter your email incorrectly. After clicking "Send," the error must appear explicitly so the user knows what went wrong and can correct it. We recommend using clear, descriptive error messages and associate them directly with the input field, so screen readers and keyboard users can easily detect and fix mistakes.

• When building your website, all the code behind it needs to be clean and correct so that browsers and assistive technologies can understand it. This means every element should have complete start and end tags (i.e. <p> and </p>), be nested correctly, not have duplicate attributes, and all IDs should be unique unless the specifications allow otherwise. If your markup is messy or broken, screen readers or other tools may misread your content, making it harder for users to access your site.

• Regarding for all interactive elements (buttons, form fields, links, etc.) the name, role, and value must be programmatically available. In simple terms: name (what the element is called, like "Submit" or "Search."), role (what the element does, like a button, checkbox, or link) and value or state (any setting the user can change, like a checked box or a slider's current position). Any changes to these elements must also be communicated automatically to assistive technologies. For example, if a checkbox is checked or unchecked, a screen reader should announce that change so the user knows what's happening.

Tools to help you test accessibility

Implementing accessibility is one thing, but verifying it is just as important. Here are some tools that can help you audit your website:

• WAVE: A free web accessibility evaluation tool that visually highlights errors, alerts, and structural elements directly on your page, making it easy to spot issues at a glance.
• Google Lighthouse: Built into Chrome DevTools, Lighthouse includes an accessibility audit that scores your page and provides actionable suggestions for improvement.
• Heading Extractor: Use it to check if your page follows a proper heading hierarchy, which is essential for screen readers and content structure.
• Contrast Checker: Verify that your text and background color combinations meet WCAG contrast requirements.
• Readability Score Checker: Evaluate how easy your content is to read and understand, which directly impacts accessibility for users with cognitive disabilities.
• Link Checker: Analyze your internal and external links to ensure they are functional and properly structured for assistive technologies.

Summary

As we have explained here, web accessibility is very important, because by not considering it, you are effectively excluding a whole group of people. It shouldn't be taken for granted or used for purposes other than its main goal: making websites accessible to everyone.

We know that having an accessible website is not easy. Here we have only explained how to implement the most basic level (Level A), and it requires lots of changes, some of which are even technically challenging; but it's crucial to do so to ensure access for all individuals. We acknowledge that after reading all this you are probably overwhelmed, and we get it. But by implementing these changes, you will also enjoy other benefits that will positively impact your marketing strategy.

As you have probably noticed, web accessibility is often complicated by animations, video, and audio, types of content that are not usually included in simple, well-structured websites. This leads us to what we believe is the best approach when building a website from scratch: simple websites are the best ones. They aren't overloaded with visual elements, they are easier to navigate for users, easier for AI and search engines to crawl, and they load more quickly. The most visually flashy site isn't always the most effective one.

However, we want to highlight again that the main takeaway is this: accessibility should never be implemented just for ranking purposes. It is a necessity for millions of people around the world who are often ignored.

And remember, to truly know if all these features work, you must conduct testing with assistive technologies, such as screen readers, keyboard navigation, and voice control. Only real testing can confirm that your website is genuinely accessible to everyone.