Breaking Barriers: How We Make Websites Accessible – Part 2

Welcome to the second part of our series, where we delve into the essential Web Content Accessibility Guidelines (WCAG) and our dedicated approach to their implementation.  

Our main priority is to create an accessible and user-friendly digital environment for all users, including those with disabilities. In this post, we continue our discussion with the guidelines at the more challenging WCAG Level AA. 

We provide an in-depth exploration of each recommendation, its importance, who benefits most, and our approach to ensuring compliance. We believe that understanding and implementing these guidelines is vital for a more inclusive and accessible web experience for everyone.

Let’s get started. 

Inclusive Design,
Better Business

Enhance accessibility.
Get your website compliant now.

GO ACCESSIBLE

The Journey from Level A to Level AA

First off, let’s take a moment to discuss how Level A differs from Level AA, and why the latter can present more challenges in implementation.

As a reminder, Level A is the most basic level of web accessibility. It includes the most critical and fundamental accessibility features that a website should have. For instance, providing text alternatives for non-text content, ensuring that all functionalities are available from a keyboard, and offering users the ability to stop, pause, or hide moving, blinking, or scrolling information. Meeting Level A conformance is crucial to ensure your site is not extremely difficult or impossible for certain users to access.

Level AA, on the other hand, encompasses a more comprehensive set of requirements. It includes all Level A criteria, plus additional guidelines that address common issues faced by users with disabilities.

These guidelines could include providing captions for all live audio content, offering multiple ways to find web pages, and ensuring that text and images of text have a contrast ratio of at least 4.5:1.

The transition from Level A to Level AA can be challenging for several reasons:

1. Technical complexity. Level AA often requires more advanced coding skills and understanding of accessibility principles. For example, creating a consistent navigation and identifying the user’s location within navigation menus can be technically complex.
2. Time and resources. Achieving Level AA compliance often demands more time and resources. This might include conducting a thorough audit of your website, hiring a dedicated accessibility team, or investing in training and tools.
3. Design considerations. Some Level AA criteria could potentially impact your website’s design. For instance, ensuring sufficient contrast ratios might require a change in your site’s color scheme.

Despite these challenges, striving for at least Level AA compliance is highly recommended. It significantly improves the user experience for people with disabilities, helps avoid potential legal issues related to accessibility, and ultimately, expands your website’s reach to a broader audience.

So, what are the key Level AA guidelines and how do we implement them to make your websites more accessible and user-friendly? Let’s talk about it next. 

How We Implement WCAG Recommendations for Our Clients

Level AA 

#1: Captions (Live)

WCAG Recommendation 1.2.4 states that captions must be provided for the entire audio content in live synchronized media.

Why Is It Important? 

The importance of this recommendation lies in the fact that it promotes inclusivity and equal access to information and entertainment. Individuals who rely on captions, such as those who are deaf or hard of hearing, should not be excluded from participating in live events or accessing important audio content.

Who Benefits the Most? 

By providing captions for live synchronized media, such as videos or livestreams, the content becomes accessible to people who cannot hear or have difficulty hearing the audio. Captions display text that represents the spoken content, allowing individuals with hearing impairments to understand and engage with the video content.

Furthermore, captions also benefit individuals who are in environments where listening to audio is not feasible or desirable, such as in noisy environments or in situations where silence is required. 

Captions provide an alternative way to consume the content without relying on audio alone.

Our Approach 

Our approach to implementing the WCAG Captions (Live) recommendation involves providing captions for live broadcasts. We also use media players or broadcast platforms that support live captioning.

#2: Audio Description (Prerecorded)

WCAG Recommendation 1.2.5 Audio Description (Prerecorded) states that prerecorded video content should include audio descriptions that provide a verbal narration of visual elements, actions, and other important details that are not conveyed through the main audio track.

Why Is It Important? 

This recommendation is crucial because it ensures that individuals who are blind or have low vision can fully understand and enjoy video content. Without audio descriptions, these users would miss out on vital information presented visually, such as facial expressions, gestures, scene changes, and other visual cues that enhance the understanding and enjoyment of videos.

Who Benefits the Most? 

By providing audio descriptions, content creators and developers can make their videos inclusive and accessible to a broader audience. People who benefit the most from this recommendation are those with visual impairments, including blind individuals, who rely on audio descriptions to understand the visual content being presented.

Audio descriptions enable visually impaired individuals to engage with various types of video content, such as movies, TV shows, educational videos, training materials, and online courses. It enhances their overall media experience by allowing them to follow the story, characters, actions, and any visual elements that are essential to the narrative.

In addition to benefiting visually impaired individuals, audio descriptions can also be helpful for other users, such as those with cognitive disabilities or those learning a new language. Audio descriptions provide additional context and clarification, making the content more understandable and meaningful.

Our Approach 

To implement the 1.2.5 Audio Description (Prerecorded) WCAG recommendation, we take the following steps:

1. We ensure the inclusion of audio descriptions where the visual elements are not covered in the video’s dialogue.
2. Our team can integrate the audio description directly into your video or provide it as a separate element.
3. Our audio descriptions are comprehensive, encompassing scene transitions, settings, actions spoken in dialogues, and any other visual details not communicated through speech or dialogue.
4. We use media players that are fully equipped to support the use of audio descriptions.

#3: Orientation

The WCAG 1.3.4 Orientation recommendation emphasizes the importance of creating digital content that is flexible across different device orientations.

Why Is It Important? 

The WCAG 1.3.4 Orientation recommendation is incredibly important for several reasons.

Firstly, it promotes inclusivity and accessibility in digital content. By not restricting content to a single display orientation, we ensure that everyone, regardless of their physical abilities or device usage preferences, can access and interact with the content effectively. This is a crucial aspect of designing for all users, not just a majority.

Secondly, it acknowledges and respects user autonomy. Some users might prefer one orientation over another due to personal comfort or specific use cases. For example, landscape mode might be preferable for watching videos or playing games, while portrait mode might be more convenient for reading text. By allowing both orientations, we give users the freedom to choose how they want to consume the content.

Thirdly, it enhances usability and user experience. A design that works well in both orientations shows that thought has been put into the user’s interaction with the product. It also allows for better use of screen real estate, especially on devices with larger displays.

Lastly, this recommendation is important because it future-proofs digital content. As technology evolves and new types of devices emerge, the flexibility of display orientation will become even more crucial. Adhering to this guideline ensures that the content will remain accessible and user-friendly, no matter what the future holds.

Who Benefits the Most?

This recommendation is particularly beneficial for individuals with certain types of disabilities. For instance, people with physical disabilities may have their devices mounted in a fixed orientation and may not be able to easily switch between portrait and landscape modes. Similarly, some users might have dexterity impairments that make it difficult to rotate their devices.

Moreover, this recommendation also enhances the overall user experience as it provides flexibility in terms of how content can be viewed. It is especially relevant in the current digital age, where people use a variety of devices such as smartphones, tablets, and laptops, each with their unique display characteristics.

In essence, the WCAG 1.3.4 Orientation recommendation encourages designers and developers to consider the diverse needs of their audience, ensuring that their digital content is accessible to as many users as possible, regardless of how they choose to view it.

Our Approach 

Here’s how we implement the WCAG 1.3.4 Orientation recommendation:

1. Orientation flexibility. We do not limit your application or website to function only in landscape or portrait mode. Both modes are fully supported, providing users with the flexibility to choose their preferred viewing orientation.
2. Adherence to device settings. We ensure your application or website respects the default orientation settings of the user’s device. This means that your website will display in the mode (landscape or portrait) set by the user in their device settings.
3. Responsive design implementation. Our design approach caters to both landscape and portrait orientations. Regardless of how users hold their devices, they are guaranteed an optimal viewing experience.
4. User-centered testing. We conduct thorough testing across multiple devices and screen sizes to ensure your application or website performs well in both landscape and portrait modes.

#4: Identify Input Purpose

WCAG recommendation 1.3.5 requires that the purpose of a form input field can be programmatically determined when it collects information about the user.

Why Is It Important? 

• Ease of use. By identifying the input purpose, assistive technologies like screen readers can provide more context to users, making it easier for them to understand what information is required.
• Autofill support. When the purpose of an input field is programmatically determined, browsers can use this information to autofill the field, saving the user time and effort.
• Error reduction: Autofill features also reduce the chances of errors, which can be particularly useful for users with cognitive, learning, or motor impairments who may struggle with accurately completing form fields.

Who Benefits the Most? 

The people who benefit most from this guideline are:

1. People with visual impairments. Screen readers can announce the purpose of the input field, helping users understand what information they need to provide.
2. People with cognitive or learning disabilities. Identifying the input purpose can make it easier for these individuals to understand and complete forms.
3. People with motor impairments. Autofill features can help users who have difficulty typing or controlling a mouse.

Our Approach

In order to fully implement the 1.3.5 Identify Input Purpose WCAG recommendation, we follow these steps:

1. We make sure that every input field gathering user information has a purpose that can be programmatically determined. This is only applicable if the input field’s purpose is listed in the ‘Input Purposes for User Interface Components‘ section.
2. We use technologies that are capable of determining the expected meaning of form input data.
3. We ensure that the purpose of the input can be determined programmatically.
4. When the autocomplete attribute is in use, we apply appropriate token values.
5. We avoid using autocomplete on input fields that aren’t collecting user data.

For a complete list of input types, click here. 

#5: Contrast (Minimum)

WCAG recommendation 1.4.3 aims to enhance the readability of text on web pages. This guideline stipulates that visual presentation of text and images of text should have a contrast ratio of at least 4.5:1, except for large text (18 point or 14 point bold), which should have a contrast ratio of at least 3:1.

Why Is It Important? 

The guideline ensures that textual content is easily discernible to all users, including those with low vision, color blindness, or other visual impairments. By adhering to this guideline, designers can ensure that their content is accessible to a larger audience, thereby promoting inclusivity.

Who Benefits the Most? 

Those who benefit most from this guideline are people with visual impairments. For instance, individuals with low vision often struggle to decipher text that does not contrast well with its background. Similarly, people with color blindness might find it challenging to read text if the color of the text and its background are too similar.

This guideline can also improve the reading experience for users in certain scenarios, such as viewing a screen in bright sunlight or on a device with a low-quality display. Therefore, by adhering to the Contrast (Minimum) guideline, web designers can enhance the overall user experience, making their content more readable and accessible for everyone.

Our Approach

Here’s how we implement the 1.4.3 Contrast (Minimum) WCAG recommendation:

1. We ensure a minimum visual contrast ratio of 4.5:1 between text and its background. This applies to images with text as well.
2. We develop the style guide in such a way that critical texts always meet the required minimum contrast.
3. We choose color schemes that offer enough contrast to be easily seen and read by everyone.
4. If achieving the minimum contrast requirement in our content design and development becomes challenging, we offer a “Contrast” mode using alternative CSS.

Legal-Proof
Your Website

Accessibility implementation
for compliance.

ACT NOW

#6: Text Resize

The WCAG 1.4.4 recommendation on Text Resize stipulates that web content should be implemented in such a way that it can be resized up to 200% without loss of content or functionality.

Why Is It Important? 

This recommendation is important for several reasons:

1. Inclusivity. It ensures that people with low vision can comfortably read and interact with web content. By allowing text to be resized, we ensure that anyone, regardless of their visual capabilities, can access and understand the content.
2. Usability. Even users without visual impairments can benefit from the ability to resize text. For instance, someone might want to increase text size when viewing a website on a small screen, or decrease it to fit more content on a larger screen.
3. Compliance. Many jurisdictions require websites to meet WCAG guidelines as part of their legal requirements for digital accessibility. Ensuring text can be resized helps comply with these regulations.

Who Benefits the Most? 

The primary beneficiaries of this recommendation are those with low vision, including older people who often experience a decrease in vision with age. However, it also benefits users who have difficulty reading small text on screens of varying sizes.

Our Approach 

To implement this WCAG recommendation, we take the following steps: 

1. We ensure that all text can be resized up to 200% without compromising content quality or functionality, and without the need for assistive technologies.
2. In cases where browsers do not offer or support zoom functions, we provide alternative CSS for scaling purposes.
3. When text is enlarged to 200%, we make sure there is minimal horizontal scrolling required.
4. For lengthy user interface components or content, such as email subject lines, we truncate the information and provide clear instructions on how to access the full content.
5. Our default setting uses ‘rem’ units for font size and absolute values for line-height. We avoid using ‘rem’ for header navigation, footer content, and main text content which cannot be scaled due to design constraints.
6. For instances where text is located within a fixed size box and scaled text could be cut off or moved, we avoid using ‘rem’.
7. We do not use pixel values for HTML font size. Instead, we either leave it blank or set the value in percentages. For example, we consider ‘font-size: 62.5%’ to be equivalent to ‘font-size: 10px’, and ‘font-size: 100%’ to be equivalent to ‘font-size: 16px’. 

#7: Images of Text

The WCAG recommendation 1.4.5 states that if the same visual presentation can be made using text alone, an image should not be used to present this information. The exception is when a particular presentation of text is essential to the information being conveyed.

Why Is It Important? 

The rationale behind this rule is that text can be resized without losing clarity, and it can also be read aloud by screen readers, which is beneficial for people who have visual impairments or reading difficulties. Images of text, on the other hand, can be  pixelated when zoomed in and are not always compatible with screen readers.

Who Benefits the Most? 

This recommendation is particularly important for people with low vision who may need to increase the size of the text to read it, and for those who rely on text-to-speech technology, such as people with dyslexia, literacy difficulties, or certain types of learning disabilities.

It also benefits people with cognitive disabilities who may find it easier to understand the content when it’s presented in a simple, straightforward manner rather than in a complex image. In addition, users with slow internet connections or limited bandwidth can benefit from this guideline as text generally loads faster and requires less data than images.

Our Approach 

In our commitment to adhere to the 1.4.5 Images of Text WCAG recommendation, we undertake the following measures:

1. Prioritize the use of actual text over images of text whenever feasible.
2. Employ CSS-styled headings as an alternative to Bitmap images, ensuring better accessibility.
3. Offer site-wide controls that allow for customization of images that contain text, especially in instances where these images are dynamically generated.
4. Use CSS to dictate the spacing, alignment, color, and font family of user interface elements, including their text and icons, quotations, etc.
5. Opt for keyboard-generated symbols instead of converting them into images, wherever possible

#8: Reflow 

The WCAG recommendation 1.4.10, also known as “Reflow,” is an essential guideline that ensures that web content can be presented in different ways without losing information or structure. 

Why Is It Important? 

The main objective of Reflow is to make sure that content does not require a two-dimensional layout for usage or understanding. Without reflow, zooming in could mean that crucial information becomes hidden off-screen. This can result in a frustrating and inaccessible experience for users who need to zoom in to interact with the content.

Who Benefits the Most? 

Reflow is particularly important for individuals who have low vision and rely on zooming in on web content to read and interact with it. When a user zooms in on a page (up to 400%), reflow ensures that all the content is still available and visible within the viewport. This means that users do not have to scroll horizontally to find information off-screen.

In addition, Reflow benefits users who use mobile or smaller devices, as it ensures that content can adapt to fit different screen sizes without losing information or structure. This makes the web more accessible and usable for everyone, regardless of their device or accessibility needs.

Our Approach 

Here’s how we approach the implementation of this WCAG recommendation:

1. We ensure that content is displayed without losing any information or functionality, and it doesn’t necessitate scrolling in two dimensions.
2. For content requiring vertical scrolling, we maintain a width equivalent to 360 CSS pixels.
3. For content requiring horizontal scrolling, we manage a height equivalent to 256 CSS pixels.
4. We make an exception for sections of the content that demand a two-dimensional layout for their use or comprehension.
5. From the initial stages of design, we incorporate Responsive Web Design (RWD) principles.
6. We use accessible links and interactive elements like modals and toggles to display or conceal content.
7. We strive to eliminate horizontal scroll bars when the content is zoomed 400%.
8. We avoid content overlaps, clipping, loss of content, and loss of functionality.

#9: Non-Text Contrast

The WCAG 1.4.11 Non-text Contrast recommendation stipulates that the visual presentation of user interface components and graphical objects must have a contrast ratio of at least 3:1 against adjacent colors. This means that elements such as form input borders, buttons, icons, and graphs need to have sufficient contrast with their backgrounds to ensure they are easily distinguishable.

Why Is It Important? 

This recommendation is crucial for a number of reasons:

1. Enhanced visibility. The guideline ensures that important visual information is discernible for all users. This includes those with low vision, color blindness, or older people experiencing changes in vision.

2. User interface usability. With sufficient contrast, users can easily identify interactive components on a web page. This enhances the overall user experience and ensures that the website is easy to navigate.

3. Information comprehension. Graphical representations like charts and graphs are often used to convey complex information. Ensuring significant contrast allows all users, including those with visual impairments, to comprehend this data.

Who Benefits the Most? 

Those who benefit most from this guideline are people with visual impairments such as color blindness and low vision. However, adhering to this standard improves the overall user experience for everyone by making websites more visually clear and easier to navigate.

Our Approach 

To implement the WCAG recommendation about contrast ratio, we take the following steps:

1. We make sure that hit-areas and focus indicators achieve a 3:1 contrast ratio with their inner or outer background. This ensures that these elements are clearly visible and distinguishable.
2. We ensure that checked/unchecked states meet a 3:1 contrast ratio against their adjacent color. This helps to clearly distinguish between different states.
3. In cases where graphs and charts use color as the only means to distinguish information, we ensure that the contrast ratio is met against adjacent colors. This makes it easier for users to understand and interpret the data.
4. We select and define appropriate color combinations for UI elements and other graphical objects in our style guides and design documents. This prevents the need for uncomfortable retrofitting later on and ensures that our designs are accessible from the beginning.

#10: Text Spacing

The WCAG standard 1.4.12 stipulates that no loss of content or functionality should occur if the user adjusts certain text style parameters. These include line height (line spacing), spacing following paragraphs, letter spacing (tracking), and word spacing. The specifics are:

• Line height (line spacing) to at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size;
• Letter spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.

Why Is It Important?

The primary reason this recommendation is important is because it ensures that web content is accessible to everyone, regardless of their visual abilities or disabilities. People with low vision, dyslexia, and other cognitive or learning disabilities often need to adjust text spacing to read effectively.

Allowing users to manipulate text spacing can significantly improve readability. For example, increasing the space between lines can prevent readers from skipping lines, while increasing the space between words can help users better distinguish one word from another.

Who Benefits the Most?

While everyone can benefit from clearer, more readable text, this guideline particularly aids:

• People with dyslexia. Adjusting letter and word spacing can help reduce the swapping and flipping of letters and words, a common issue for people with dyslexia.
• People with low vision. Increasing line and paragraph spacing can make the text easier to track for people who use magnification software or have difficulty focusing on small text.
• Older people. As we age, our near-point vision can decline (a condition known as presbyopia), and adjusting text spacing can make text more readable.
• People with cognitive or learning disabilities. Adjusting text spacing can help reduce visual clutter and confusion, aiding comprehension.

Our Approach 

To ensure compliance with this WCAG recommendation, we adopt the following measures:

1. We refrain from using fixed containers in our CSS styles to maintain flexibility and adaptability across various screen sizes and devices.
2. We implement content reflow strategies that prevent overlapping or text cut-offs, ensuring seamless user experience irrespective of the device or screen size.
3. We apply relative units for font size, line height, and spaces between characters, words, lines, and paragraphs. This allows for improved readability and accessibility, as it facilitates dynamic adjustment based on user preferences and device specifications.

Inclusive Design,
Better Business

Enhance accessibility.
Get your website compliant now.

GO ACCESSIBLE

#11: Content on Hover or Focus

The WCAG recommendation 1.4.13 focuses on the behavior of additional content that appears when a user hovers over or focuses on an element. This could be a tooltip, a dropdown menu, or any other type of content that becomes visible due to user interaction.

Why Is It Important? 

The importance of this recommendation lies in its three main principles:

1. Dismissible. The user should have a mechanism to dismiss the additional content without moving the pointer hover or keyboard focus. This is critical because it prevents users from being trapped or distracted by the additional content. It’s especially beneficial for people with motor control difficulties who might struggle to move the cursor precisely.
2. Hoverable. If additional content can be triggered by pointer hover, then the user should be able to move the pointer over this content without it disappearing. This is important for maintaining continuity of interaction and is beneficial for all users, but particularly those using screen magnifiers or similar assistive technologies.
3. Persistent. The additional content should remain visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid. This ensures that users have enough time to interact with the content. It’s especially beneficial for people with cognitive impairments or reading difficulties who might require more time to process information.

The exception mentioned in the recommendation acknowledges that some visual presentations are controlled by the user agent (like browser or operating system) and may not be modified by the author. These might not adhere to the above principles, but they are outside the website author’s control.

Who Benefits the Most? 

This WCAG recommendation is highly beneficial for everyone as it improves the overall usability of web content, but it is particularly crucial for individuals with certain types of disabilities:

1. People with motor control impairments. This includes conditions like Parkinson’s disease, cerebral palsy, or any form of physical injury that affects motor control. The ‘Dismissible’ and ‘Hoverable’ criteria are especially helpful for these individuals as they may struggle with precise mouse movements.
2. People with low vision. Those who use screen magnifiers will find the ‘Hoverable’ criterion extremely useful. It ensures that they can move their pointer over the additional content without it disappearing, making navigation significantly easier.
3. People with cognitive or attention deficits. These users benefit greatly from the ‘Persistent’ criterion, as it allows the additional content to remain visible until they choose to dismiss it or move their focus away. This gives them enough time to comprehend the information despite potential difficulties with concentration or information processing.

Our Approach 

In order to adhere to this WCAG recommendation, we take the following steps:

1. We establish a mechanism that allows users to easily dismiss any additional content that appears upon hover or keyboard focus.
2. We ensure that the content remains visible until the user deliberately moves their mouse pointer away from the triggering element or content block.
3. We strive to provide a consistent user experience by maintaining the stability of content and interactions.

#12: Multiple Ways

WCAG 2.4.5 recommendation states: “More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.” 

In simpler terms, it means that there should be multiple ways for users to find and access different web pages on a site. This could include a site map, search function, list of all available web pages, or using links within the text.

Why Is It Important? 

The recommendation is crucial for several reasons, primarily revolving around accessibility and usability.

1. Promotes accessibility. The primary reason this guideline is important is that it promotes accessibility. People with disabilities may use assistive technologies or alternative methods to navigate websites. By providing multiple ways to locate a web page, we ensure that these individuals can access and use web content just as effectively as those without disabilities.
2. Enhances user experience. Having multiple ways to locate a web page improves the overall user experience. It offers users the flexibility to choose the navigation method that they find most intuitive and convenient. This can lead to increased user satisfaction and engagement.
3. Reduces frustration and abandonment. Websites can be complex, and users can easily get lost or frustrated if they can’t find the information they’re looking for. By offering multiple ways to locate a web page, you reduce the likelihood of users abandoning your site in frustration, thereby increasing the chances of them completing their intended actions (e.g., making a purchase, signing up for a newsletter, etc.)
4. Improves SEO. Search engines prefer websites that are easy to navigate. By providing multiple ways to locate a web page, you improve the site’s Search Engine Optimization (SEO), making it more likely to appear in search engine results and attracting more visitors.

Who Benefits the Most?

People with disabilities, particularly those with visual impairments or cognitive limitations, benefit the most from this recommendation. For example, visually impaired users who use screen readers can find the information they need more easily if there are multiple navigation options.

Similarly, individuals with cognitive limitations might struggle with complex navigation systems, so having different ways to locate web pages can help them use the site more effectively.

Moreover, this guideline benefits everyone, not just those with disabilities. Having multiple ways to find information improves the overall user experience by making navigation more intuitive and less frustrating. This can lead to higher user satisfaction and engagement, making it a best practice for web design in general.

Our Approach 

To implement this WCAG recommendation, we undertake the following measures:

1. Page identification. We ensure that there are multiple methods to identify the required page within a set of pages. This may include a search function or a sitemap for easy navigation.
2. Multiple success criteria. We acknowledge that more than one way must be available to meet this success criteria. Therefore, we aim for diversity in our approach.
3. Breadcrumb navigation. Despite being an older method, breadcrumb navigation is still used as it effectively helps users retreat in a process or navigate through a layered structure.
4. Search functionality. We incorporate a powerful search function to facilitate faster navigation, enabling users to quickly locate the information they need.
5. Menu structure. Although menus can become larger and potentially cumbersome, we continue to use them as they are particularly effective when searching for a specific category.

#13: Headings and Labels

The WCAG recommendation 2.4.6 emphasizes that headings and labels should be descriptive to help users find content and understand what they will find when they navigate to it.

Why Is It Important? 

This recommendation is crucial for several reasons:

1. Accessibility. Descriptive headings and labels improve the accessibility of web content, particularly for people with cognitive limitations and visual impairments. For those using screen readers, clear headings and labels can provide a roadmap of the page’s content, helping them navigate more efficiently.
2. Usability. Even for users without disabilities, well-structured and descriptive headings make it easier to skim a page and locate relevant information quickly. They provide context for the ensuing content and can improve comprehension.
3. SEO. From a technical perspective, appropriately used and well-described headings are beneficial for search engine optimization (SEO). Search engines like Google use headings to index the structure and content of your web pages, helping to improve visibility in search engine results.

Who Benefits the Most?

The benefits of adhering to this guideline are universal, improving usability for all users. However, certain groups derive particular advantage from this practice:

1. Visually impaired users. Those using assistive technologies like screen readers rely heavily on headings and labels to understand and navigate web content.
2. Users with cognitive disabilities. Clear, descriptive headings and labels can help these users better understand the organization of the site and the content on each page.
3. Non-native speakers and readers. For people who are not fluent in the language of the website, clear headings and labels can make it easier to understand the content.

Our Approach

To implement the Headings and Labels recommendation, we undertake the following actions:

1. Craft descriptive text. We ensure that the text within our headings and labels accurately conveys the purpose or intent of the associated content, even before a user interacts with them.
2. Prioritize clarity and conciseness. Our headings are developed to be clear, concise, and descriptive, providing users with an accurate indication of what they can expect from the subsequent content.
3. Maintain sequential order. We arrange headings in a logical and sequential order, minimizing potential confusion and enhancing the ease of navigation across the site.
4. Ensure consistency. We maintain consistency in our use of headings throughout the site, providing a coherent and predictable experience for all users.
5. Create descriptive labels. Our labels are explicitly descriptive, promoting understanding and enabling users to take appropriate and necessary actions.

#14: Focus visible

The WCAG recommendation 2.4.7 states that any interactive component on a web page should have a visible indicator when it’s in focus. This means that when users navigate through a website using a keyboard, they should be able to easily see which element they’re currently interacting with.

Why Is It Important? 

The importance of this guideline lies in its ability to make the web more accessible, especially for people who rely on keyboard navigation. These could be users with motor disabilities who find it hard to use a mouse, or visually impaired users who use screen readers along with keyboard navigation.

Without a clear focus indicator, these users could easily lose track of where they are on the page, making it difficult for them to interact with the site effectively. A visible focus can be achieved through various design elements like changes in color, addition of borders, or even animations.

Who Benefits the Most? 

This recommendation primarily benefits users who rely on keyboard navigation. This includes:

1. People with motor disabilities. Users with conditions like Parkinson’s disease, cerebral palsy, or any form of motor neuron disease often find it difficult to use a mouse for navigation and rely heavily on the keyboard.
2. Visually impaired users. Those with severe visual impairments often use screen readers in conjunction with keyboard navigation. The visible focus helps them better understand the layout and navigate the site effectively.
3. Older adults. Aging can bring a decline in fine motor skills, making the precise movements required to operate a mouse challenging. These users often find keyboard navigation easier.
4. Users with temporary disabilities. A person with a broken arm or hand, for example, may temporarily rely on keyboard navigation.
5. Power users. Some advanced users prefer using the keyboard for efficiency reasons. They find navigating with keyboard shortcuts faster than using a mouse.

Our Approach

To ensure adherence to this WCAG recommendation, we undertake the following steps:

1. Highlight interactive elements. We make certain that all interactive elements on the website have a clearly visible focus indicator. This ensures that users can easily identify their current location as they navigate through the site.
2. Leverage browser capabilities. We allow browsers to manage the visibility of focus for active elements. This approach takes advantage of built-in browser functionalities designed to enhance user experience.
3. Maintain visibility for active elements. We guarantee that any active element on the site is provided with a visible focus. This aids in user orientation during site navigation.
4. Ensure focus movement. When a user navigates through the website using the keyboard, we ensure that the visible focus moves along with each element presented on the page. This makes the navigation process seamless and intuitive.
5. Optimize contrast. We ensure there is adequate contrast between the visible focus and the background of the element. For instance, if both the visible focus and the background of an element are black, it becomes difficult to distinguish the focus. Therefore, we carefully select contrasting colors to maintain clear visibility.

#15: Language of Parts

The WCAG recommendation 3.1.2 advises that the human language of each passage or phrase in the content can be programmatically determined, except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

For example, if an English web page contains a few sentences in French, those sentences should be marked in a way that lets user agents (like browsers or assistive technologies) know they’re in French.

Why Is It important?

This guideline is vital because it allows assistive technologies, such as screen readers, to accurately interpret and relay content in its intended language. If the language isn’t correctly marked, the technology may not pronounce the words correctly, leading to confusion and miscommunication.

Who Benefits the Most? 

This guideline is particularly beneficial for individuals who rely on assistive technologies to access online content, including people with visual impairments or literacy difficulties. For instance, someone using a screen reader will have the content read out in the correct accent and pronunciation if the language is properly identified.

Moreover, it’s also useful for anyone who is multilingual, as they can understand the context of language switches, which may otherwise disrupt their comprehension.

Our Approach 

To implement this WCAG recommendation, we undertake the following steps:

1. Identify different languages. We first detect any text or elements on the web page that are in a language different from the primary language of the page.
2. Define language programmatically. For such identified content, we define the language programmatically to ensure accurate interpretation by assistive technologies.
3. Use appropriate language codes. To achieve this, we employ the appropriate language code (for example, lang=”fr” for French) wherever the text is in a different language.
4. Employ correct language tokens: We also make sure to use the correct language token in the lang attribute (like lang=”pt-br” for Brazilian Portuguese).
5. Consider exceptions. While implementing these measures, we remain mindful of any exceptions and handle them cautiously.
6. Apply lang attribute: Typically, the lang attribute is used on an HTML tag to set the main language for the entire document. However, we also use it for other tags on the page when necessary, to indicate changes in language. 

Example: 

<p lang=”en”>English content</p>  
<p lang=”fr”>French content</p>

Legal-Proof
Your Website

Accessibility implementation
for compliance.

ACT NOW

#16: Consistent Navigation

WCAG recommendation 3.2.3 advises that navigation mechanisms that are repeated on multiple web pages within a set of web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Why Is It Important? 

Implementing consistent navigation is important for several reasons. Firstly, it helps users become familiar with the structure of your site more quickly. If every page has a different layout or navigation, users can become confused and may struggle to find the information they need. This can lead to a frustrating user experience and may cause users to leave the site.

Who Benefits the Most?

This WCAG recommendation can be particularly helpful for individuals who have cognitive or learning disabilities, as well as visually impaired users who rely on screen readers to navigate websites.

In addition, this standard can also enhance the overall user experience for all users, not just those with disabilities. By providing a consistent and predictable navigation structure, websites can become more intuitive and easier to use, potentially increasing user engagement and satisfaction.

Our Approach

To ensure the successful implementation of this WCAG recommendation, we undertake the following actions:

1. We maintain consistency in the placement of navigation menus across all web pages. This means the location of these menus remains the same on every page.
2. We present navigation menus in a uniform order on all web pages. This ensures that users can predict where to find information and navigate the site with ease.
3. We place standard elements such as a logo, search functionality, and skip links at identical locations on all pages. This consistency aids in user familiarity and ease of use.
4. We leverage a standard template for our web pages to ensure consistent navigation. 

#17: Consistent Identification

The WCAG recommendation 3.2.4 mandates that components or elements with the same functionality should be identified consistently across different web pages within a site.

Why Is It Important? 

This recommendation is important for a variety of reasons, all of which contribute to creating a more accessible and user-friendly web experience.

1. Ease of navigation. If elements are consistently identified across different pages, users can quickly understand the purpose of each element without having to guess or explore. This is especially beneficial for people with cognitive disabilities who may struggle with understanding complex interfaces.
2. Predictability. Consistent identification makes the web more predictable. When similar elements are tagged in the same way across different pages, users can anticipate their functionality, making the web easier and faster to navigate.
3. Assistive technologies. Consistent identification aids assistive technologies like screen readers. It helps them interpret web content accurately, ensuring users receive correct information.
4. User confidence. Consistency builds confidence. When users encounter familiar elements across pages, they feel more comfortable and in control, increasing their likelihood to continue using the website or application.

Who Benefits the Most? 

Individuals with cognitive impairments or learning disabilities may struggle with inconsistent identification of elements across a website. If a shopping cart icon is labeled ‘Basket’ on one page and ‘Cart’ on another, it might cause confusion. 

Similarly, screen reader users rely on consistent labeling to navigate a site, so variable identification can pose significant challenges.

Furthermore, this recommendation also benefits elderly users who might not be as tech-savvy. Consistent identification across a website can make navigation easier and less confusing for them, enhancing their overall user experience.

Our Approach 

To implement this WCAG recommendation, we adhere to the following practices:

1. We make sure that components with identical functionality are consistently identified across your website.
2. We ensure that icons and images, which are used repeatedly and serve the same function, are equipped with identical alternative text.
3. We consistently name and label elements with the same functionalities.
4. We use consistent icons and images for certain functions, such as print and Facebook.
5. We understand that images can convey different meanings in varying contexts, so we provide appropriate alternative text depending on the specific context.

#18: Error Suggestion

WCAG recommendation 3.3.3 focuses on providing appropriate suggestions for correcting input errors when possible.

Why Is It Important? 

The importance of this recommendation lies in its ability to enhance the usability and accessibility of websites. When users encounter an error, especially those with cognitive disabilities or those who are not tech-savvy, they might struggle to understand what went wrong and how to fix it. By providing clear and immediate suggestions for error correction, we can mitigate user frustration and help them successfully complete their intended actions.

Who Benefits the Most? 

This recommendation benefits all users by making online navigation smoother and less confusing. However, it’s particularly beneficial for:

1. Users with cognitive impairments. These individuals may have difficulties understanding complex error messages. Clear suggestions can guide them towards successful interaction with the site.
2. Elderly users. As some may not be as familiar with digital interfaces, straightforward error suggestions can make their web navigation experience less stressful and more intuitive.
3. Non-native speakers. Clear error suggestions can assist users who are interacting with the website in a language other than their first one, helping them understand and rectify mistakes more easily.

Our Approach 

To implement this  WCAG recommendation, we undertake the following actions:

1. Identify and rectify user input errors. If there are known corrections for identified errors that don’t compromise security or purpose, we promptly provide them.
2. Offer descriptive errors. By providing detailed error messages, we ensure users understand the issue at hand and how to resolve it.
3. Supply visible hints. We offer clear hints to help users avoid making mistakes during form submissions.
4. Link errors to form controls. Using ‘aria-describedby‘, we tie errors directly to their corresponding form controls for easy reference.
5. Redirect focus to error source. When validation fails, we automatically shift the focus to the form control with the error, minimizing the need for additional keystrokes.
6. Mark mandatory fields. We visually and programmatically denote required fields with an asterisk using ‘aria-required‘, ensuring users know what information is necessary for form submission.

#19: Error Prevention (Legal, Financial, Data)

The primary aim of WCAG recommendation 3.3.4 is to prevent errors from occurring when users are engaged in filling out forms or data fields that involve legal commitments, financial transactions, or sensitive data. According to the guideline, if the user can change or delete legal, financial, or test data, the system should provide mechanisms to help avoid unintended submissions. These mechanisms can include:

1. Allowing the user to review and correct information before finalizing the submission.
2. Providing the user with an option to reverse the submission.
3. Checking for input errors and giving an opportunity to correct them before final submission.

Why Is It Important? 

The importance of this recommendation is immense. Firstly, it minimizes the risk of serious consequences resulting from accidental submissions or errors. This could range from incorrect financial transactions to the unintentional sharing of sensitive information. Secondly, it enhances the overall user experience by making interactions more understandable and less prone to error.

Who Benefits the Most? 

While all users would benefit from such error prevention measures, the groups that benefit the most are typically those with disabilities. For example, individuals with cognitive disabilities might find it difficult to quickly identify and correct errors. 

Similarly, people with motor disabilities who might struggle with precise inputs could accidentally select the wrong options. By implementing mechanisms to prevent errors, the accessibility and usability of web content for these users can be significantly improved.

Our Approach 

To implement this WCAG recommendation, we take the following steps:

1. Submission review mechanism. We have developed a mechanism that allows users to review and confirm their submission, especially when the form includes legal, financial, or sensitive data.
2. Form field hints. We ensure that every field in forms is accompanied by proper hints. These hints guide users in filling out the form correctly and completely.
3. Review information screen. We provide a separate screen on which all user-provided information is displayed for review. This allows users to verify their information before final submission.
4. Confirmation checkbox. We include a checkbox where users can confirm that they have reviewed all the information and are ready to submit. We have designed the system to enable the submit button only after this checkbox is checked.
5. Data deletion confirmation. Lastly, we provide a confirmation screen or dialogue box whenever users attempt to delete any data. This acts as a safety measure against accidental data deletion.

#20: Status Messages

WCAG recommendation 4.1.3 refers to the practice of ensuring that any status messages on a website can be programmatically determined through assistive technologies without receiving focus.

Status messages are pieces of information that are typically provided to a user after they take certain actions, such as submitting a form, completing a process, or triggering an error. They can include success notifications, error messages, warning alerts, or progress indicators.

This recommendation is crucial for several reasons:

• Ensuring accessibility. It ensures that people using assistive technologies, like screen readers, can fully understand and interact with a website. Without this compliance, these users might miss out on critical information, leading to confusion or incorrect navigation.
• Improving user experience. Even for users not using assistive technologies, clear and easily discernible status messages improve the overall user experience. They provide immediate feedback and guidance, helping users understand the result of their actions and what steps they need to take next.
• Preventing user errors. By making it mandatory to programmatically determine status messages, this guideline helps prevent user errors. For example, if a form submission fails, a clear error message can guide the user to correct the issue.

Who Benefits the Most? 

The individuals who benefit the most from the implementation of WCAG 4.1.3 are those with visual impairments or cognitive disabilities. For them, status messages communicated through screen readers or other assistive technologies can significantly enhance their ability to navigate and interact with the website effectively and independently. 

However, in the broader sense, every user benefits from clear, concise, and immediate feedback provided by compliant status messages.

Our Approach 

In order to effectively implement the WCAG recommendation 4.1.3, we adhere to the following procedures:

1. Announcement of messages. We ensure that all success notifications and error messages are structured in a way that they can be announced by screen readers. This guarantees that users who rely on these assistive technologies receive all necessary feedback.
2. Intelligent status message selection. We carefully avoid cluttering web pages with live regions. Instead, we intelligently decide which updates are significant enough to qualify as status messages, ensuring that only the most relevant and important information is communicated.
3. Exclusion of focusable messages. We make certain that messages which are focusable are not considered as status messages. This helps to prevent any confusion or misinterpretation when users interact with the content using assistive technologies.

Conclusion 

That wraps up our review of the key web accessibility guidelines at Levels A and AA and our meticulous approach to implementing them. 

As you see, our team of skilled developers and accessibility experts go the extra mile to intelligently incorporate accessibility features into websites. Whether it’s the use of clear and concise status messages or the inclusion of a review information screen for data verification, we make sure no stone is left unturned. This attention to detail guarantees that you  receive a product that is not only robust and reliable, but also inclusive and accessible.

So, whether you’re a business looking to upgrade your current web presence or a startup wanting to ensure your website is accessible to all users from day one, we invite you to leverage our unrivaled expertise in this field. 

With us, you can be confident that your digital platform will stand out for its excellence in accessibility, ultimately enhancing your reputation and reach. 

Inclusive Design,
Better Business

Enhance accessibility.
Get your website compliant now.

GO ACCESSIBLE

Contact us today and experience the difference of working with a web development company that truly understands and implements web accessibility to perfection.