The Web Content Accessibility Guidelines (WCAG), created by the World Wide Web Consortium, are technical standards designed to enhance digital accessibility for individuals with disabilities. Divided into several guidelines under the principles of Perceivable, Operable, Understandable, and Robust (also known as POUR), these recommendations provide comprehensive insights into how individuals with impairments access and navigate websites. While WCAG itself is not a law, organizations aiming to comply with the Americans with Disabilities Act (ADA) should adhere to its standards.
Organizations that believe in creating an inclusive website should understand accessibility, overcome it by adapting their website to become usable to all users. In this blog, we will explore brief topics related to WCAG.
Table of Contents
What are WCAG Failures?
WCAG failures occur when web content does not follow the rules outlined by WCAG. These problems can lead to barriers for individuals with disabilities. For example, a person with mobility impairments can not access websites that don’t support assistive technologies. Similarly, a person with color blindness may not be able to access complete functionalities of websites if there are any website elements that depend on color.
Non-compliance can also affect companies. They may face legal issues such as potential court cases and fines, for failing to comply with accessibility standards. Problems with usability may cause an unpleasant user experience, which can reduce customer satisfaction and thus, affect the financial health of your company. Additionally, companies’ reputations could be tarnished if they are perceived as non-inclusive or discriminatory. Therefore, making sure they comply with WCAG is a key part of creating an inclusive business and a digital reputation.
Most Common WCAG Failures
Let’s take a closer look at some of the common WCAG failures that organizations may face, along with the potential solutions and strategies to address them
1. Improper Use of Alt Text
WCAG success criterion 1.1.1 is essential to provide text alternatives for non-text content, making the information it conveys accessible.
Explanation: Alt text gives a textual substitute for images, enabling screen readers to make content accessible for the visually impaired. Incorrect usage such as giving non-descriptive or wrong words can obstruct usability. Images that decorate but do not add value to the content should include null alt text (`alt=””`) to avoid clutter for screen reader users.
For example, using “image” or file names such as “IMG_1234” in place of alt text is unhelpful
Remedy: All images should include accurate and descriptive alt text. Instead of using the term “image,” it’s better to describe what the picture shows, like “A woman reading a book in a park.” For decorative images that don’t convey essential information, use empty alt text.
2. Poor Color Contrast
WCAG success criterion 1.4.3 Contrast (Minimum) is to ensure there is sufficient contrast between the text and its background, making it readable for individuals with moderately low vision or reduced contrast perception.
Explanation: Not enough difference between the color of text and background can make it hard for persons with vision impairments such as color blindness, or difficulties in reading content. This problem can impact their comprehension of the written content and impair their engagement with it. For e.g., Gray text on a white background, for some users it can be hard to see.
Remedy: WebAIM Contrast Checker is helpful to verify that there is at least a contrast ratio of 4.5:1 for normal-size text and 3:1 for larger-sized text. Alter the color setup in order to improve the clarity and legibility of the text. For example, it’s typically effective when you have dark-colored letters against a lighter-colored backdrop.
WCAG success criterion SC 2.1.1 Keyboard is to ensure that your website is operable for persons with limited motor movement and to ensure that everything can be accomplished using a keyboard, except for freehand movements.
Description: People with motor disabilities often use keyboards for navigating. However, they might not be able to access all functionalities if websites lack support for keyboard navigation. It is important that all interactive parts could be accessible by a keyboard.
Interactive elements like buttons, links, and form fields that are not focusable or operable using the keyboard.
Remedy: Use semantic HTML and make sure the `tabindex’ attribute is rightly used with values (-1 or 0) for an organized navigation order. All interactive elements must be reachable through keyboard, hence test your site’s keyboard navigation to spot any problems and fix them.
4. Missing Form Labels
WCAG success criterion 3.3.2 Labels or Instructions suggests that web content developers should include clear and detailed labels or instructions for forms and other input fields. This is helpful in making content understandable.
Explanation: Labels in forms are very necessary for those users who use screen readers to comprehend and engage with the areas of forms. If labels are absent, it may be difficult for such users to fill out forms correctly.
Example: A search bar without an associated `<label>` element.
Remedy: Place plain labels with the `<label>` tag or use `aria-label` attribute for each input button. Make sure your labels are detailed. For example, instead of “Search,” you can describe as, “Search for articles”.
5. Improper Heading Structure
WCAG success criterion 2.4.6, Headings and Labels is to help users understand the content of web pages and how that information is structured.
Explanation: The tags for the heading (from `<h1>` to `<h6>`) offer a systematic organization for the website content. If we use these headings randomly or skip some levels, it could lead to confusion among users and screen readers. This would make the navigation of contents difficult and also disrupt their comprehension of the content hierarchy.
Remedy: Ensure you use heading tags in a sequence, beginning with `<h1>` for the primary title and then moving to `<h2>`, `<h3>` etc. This helps keep an orderly structure.
For instance, avoiding skipping directly from `<h1>` to <h4>`. Follow the correct arrangement instead for coherent content organization.
6. Dynamic Content Not Accessible
WCAG success criterion 3.2.1 “On Focus,” states that dynamic content should not alter its context when a field gains keyboard focus, unless the change is foreseeable.
Explanation: If users are not informed of the changes, it can be difficult for screen readers to process dynamic content like AJAX-based updates. Without notification, users could overlook important updates or information.
Remedy: With use of ARIA live regions (‘aria-live’), we can let screen readers know about modifications and changes in the content. This helps users to be notified of any dynamic changes happening on the website. You could apply ‘aria-live=”polite”‘ for updates that are not urgent and ‘aria-live=”assertive” for those key updates which need instant focus.
7. Clickable Elements Without Clear Indicators
The WCAG Success Criterion 2.4.13 Focus Appearance is to ensure that a keyboard focus indicator be clearly visible and distinguishable. This criterion is closely connected to 2.4.7 Focus Visible and 1.4.11 Non-text Contrast.
Explanation: The link and button need to have the visible focus or hover states to indicate that they are interactive. Else, users will find it hard to discern on what’s to be clicked on, which will result in a distasteful experience.
Remedy: Make sure that every element that can be clicked has visual signs such as focus rings or hover highlights to make it easier for all users. You can do this by using CSS styles that illuminate elements when they are in focus or being hovered over.
For example, you could use `:focus` and `:hover` pseudo-classes to add certain styles like alterations to borders or changes in the background color.
Companies that were sued due to WCAG failures:
WCAG’s failure can lead to legal hassles as seen with these two prominent companies which faced lawsuits:
Fox News Network
In 2018, Fox News Network faced a lawsuit claiming that the Fox News website is full of obstacles that prevent blind and visually-impaired users from accessing and enjoying Fox News facilities, goods, and services on equal terms with fully sighted individuals. Issues included missing alt text for images and links, as well as redundant or empty links that hindered keyboard navigation. The class-action suit ended in a settlement.
Beyoncé Knowles (Parkwood Entertainment)
In 2019, Beyoncé’s company, Parkwood Entertainment, was sued in a class-action lawsuit for failing to accomodate its visually impaired users. The site, which sold concert tickets and merchandise, was criticized for missing alt text for images, inaccessible menus, dropdowns, and navigation buttons, and for not supporting keyboard navigation.
To ensure compliance with WCAG, several tools can help identify and rectify accessibility issues. They include
1. WAVE (Web Accessibility Evaluation Tool): It is a confluence of tools that can identify and provide recommendations to fix issues on your website.
2. Lighthouse: A Google Chrome tool that includes accessibility checks as part of its website audit. It provides an accessibility score and highlights areas that need improvement.
3. NVDA : NVDA stands for NonVisual Desktop Access; it enables developers to understand websites from the perspective of visually impaired users, functioning as a screen reader for them.
4. AAC: The AEL Accessibility Checker (AAC) is a user-friendly solution for quick evaluation of website accessibility.
Conclusion
In a nutshell, WCAG failures take place when organizations ignore accessibility issues which results in impacting people with disabilities and potential lawsuits against your organization.
The most common WCAG issues include missing alt text, inadequate color contrast, lack of keyboard navigation support, missing labels in forms, unclear indicators for clickable elements, and improper heading structure. By prioritizing WCAG compliance and focusing more on making content more accessible to all users, we can create a more inclusive and welcoming online environment for all. Contact us today to make sure you prioritize accessibility.
