10 Essential UI Development Tips for WCAG 2.1 Compliant Web Accessibility

One of the key requirements for web accessibility is to provide text alternatives for all non-text content. This can be achieved by using alt text, transcripts, and captions. Alt text is a text description of an image or other non-text content, which can be read by screen readers and other assistive technologies. Transcripts and captions are text versions of audio and video content, respectively.

Here's an example of how to provide alt text for an image:

<img src="image.jpg" alt="A colorful sunset over the ocean">
            

In this example, the alt attribute provides a brief description of the image for users who cannot see it.

For audio and video content, you can provide transcripts and captions:

<audio controls>
              <source src="audio.mp3" type="audio/mpeg">
              <track kind="captions" src="captions.vtt" srclang="en" label="English Captions">
              Your browser does not support the audio element.
            </audio>
            

In this example, the track element provides captions for the audio content in the form of a VTT (WebVTT) file. The kind attribute specifies the type of track, and the label attribute provides a label for the track that will be displayed to users. Similarly, for video content, you can use the track element to provide captions or subtitles.

By providing alt text, transcripts, and captions for non-text content, you can ensure that your website is accessible to users with disabilities who rely on assistive technologies to access your content.

To ensure that all content is perceivable, it is important to provide sufficient color contrast between text and background. This means that text should be easy to read, even for users with low vision or color vision deficiencies. Additionally, color should not be the only means of conveying meaning.

Here's an example of how to set the color contrast between text and background using CSS:

/* Set the background color of the body element */
            body {
              background-color: #F5F5F5;
            }
            
            /* Set the text color of the body element */
            body {
              color: #333333;
            }
            
            /* Set the color of links */
            a {
              color: #0074D9;
            }
            
            /* Set the color contrast between text and background */
            body {
              color: #333333;
              background-color: #F5F5F5;
            }
            
            /* Set the color contrast between links and background */
            a {
              color: #0074D9;
              background-color: #F5F5F5;
              border-bottom: 2px solid #0074D9;
            }
            

In addition to setting color contrast, it is important to avoid using color alone to convey meaning. For example, instead of using a red asterisk to indicate a required field on a form, provide a text label that explicitly states that the field is required. This way, users with color vision deficiencies can still understand the meaning of the label.

To make interactive elements accessible via keyboard, you should ensure that they are focusable using the tabindex attribute, and that they can be activated using the Enter key. You should also provide clear visual indicators to highlight the currently focused element.

Here's an example of how to create an accessible button:

<button tabindex="0" onclick="alert('Button clicked!')">Click me</button>
          

In the example above, we added the tabindex attribute to make the button focusable. We also added an onclick attribute to handle the button click event. When the button is clicked or activated using the Enter key, it will trigger the alert function.

To provide clear visual indicators, you can use CSS to style the :focus pseudo-class. For example:

button:focus {
            outline: 2px solid blue;
          }
          

In the example above, we added a blue outline to the button when it is focused. This helps users who navigate using a keyboard or other input device to see which element is currently focused.

One way to ensure that content is operable is by providing clear and consistent navigation that allows users to easily move between different sections of the website. This can be achieved by using semantic HTML tags such as <nav>, <ul>, <li>, and <a> to create a logical hierarchy of links.

Additionally, it's important to allow users to control the pace and order of the content, which can be achieved through the use of ARIA attributes and JavaScript event listeners. For example, you can use the aria-controls attribute to associate a button with a specific section of content, and the aria-expanded attribute to indicate whether the content is currently visible or hidden.

Here's an example of how to use ARIA attributes to create an expandable section of content:

<button aria-controls="section1" aria-expanded="false">Show section 1</button>

            <div id="section1" role="region" aria-labelledby="section1-heading" aria-hidden="true">
              <h2 id="section1-heading">Section 1</h2>
              <p>This is the content of section 1.</p>
            </div>
            

In this example, the button element is associated with the div element that contains the content for section 1 using the aria-controls attribute. The aria-expanded attribute is set to false to indicate that the content is currently hidden.

When the button is clicked, you can use JavaScript to toggle the aria-expanded attribute and show or hide the content:

const button = document.querySelector('button');
            const section = document.querySelector('#section1');
            
            button.addEventListener('click', () => {
              const expanded = button.getAttribute('aria-expanded') === 'true' || false;
              button.setAttribute('aria-expanded', !expanded);
              section.setAttribute('aria-hidden', expanded);
            });
            

This JavaScript code adds a click event listener to the button that toggles the aria-expanded and aria-hidden attributes when the button is clicked. This allows users to control the visibility of the content and navigate the website at their own pace.

Responsive design is a technique that ensures that websites can adapt and provide an optimal viewing experience on different devices, including desktops, tablets, and mobile phones. Here are some code examples that can help achieve responsive design:

1. Use media queries to adjust styles based on screen size:

/* CSS for desktop */
              .my-element {
                font-size: 20px;
              }
              
              /* CSS for tablet */
              @media only screen and (max-width: 768px) {
                .my-element {
                  font-size: 16px;
                }
              }
              
              /* CSS for mobile */
              @media only screen and (max-width: 480px) {
                .my-element {
                  font-size: 14px;
                }
              }
              

2. Use flexible layouts that can adjust to the screen size:

<div class="container">
                <div class="row">
                  <div class="col-lg-6 col-md-8 col-sm-10">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                  </div>
                </div>
              </div>
              

Here, col-lg-6, col-md-8, and col-sm-10 classes indicate that the element should take up 6 columns on large screens, 8 columns on medium screens, and 10 columns on small screens, respectively. This way, the layout can adapt to different screen sizes.

Properly structured content is essential for web accessibility, as it helps users understand the hierarchy and organization of the information on a page. Here is an example of how to use appropriate markup to indicate headings and lists:

<!-- Heading markup -->
          <h1>Page Title</h1>
          <h2>Section Title</h2>
          <h3>Subsection Title</h3>
          
          <!-- List markup -->
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ul>
          
          <ol>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ol>
          

In this example, we use the <h1> element for the main page title, and then use <h2> and <h3> for section and subsection titles, respectively. This helps to create a logical hierarchy of headings.

For lists, we use the <ul> and <ol> elements for unordered and ordered lists, respectively. Within these elements, we use <li> elements to define each list item. This helps to create a clear and structured list.

<label for="name">Name:</label>
              <input type="text" id="name" name="name" aria-required="true" aria-describedby="name-help">
              <small id="name-help">Please enter your full name.</small>
              

In this example, the <label> element is associated with the corresponding <input> element using the for attribute. This allows assistive technologies to correctly label the input field and read it aloud to the user. The id attribute of the <input> element must match the for attribute of the <label> element.

The aria-required attribute is used to indicate that the input field is required. This provides additional information to assistive technologies and helps users understand that the field must be filled out.

The <small> element provides instructions to the user and is associated with the <input> element using the aria-describedby attribute. This ensures that the instructions are read aloud to the user along with the input field.

Finally, the form should provide clear feedback to the user when they submit the form or interact with form controls. This can be achieved using ARIA live regions or other techniques, depending on the specific use case.

ARIA (Accessible Rich Internet Applications) is a set of attributes that can be added to HTML elements to improve the accessibility of complex user interface components. Here's an example of how to use ARIA roles and attributes to improve the accessibility of a menu:

<nav role="navigation">
              <h2>Menu</h2>
              <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
            

In this example, the nav element has been given a role of "navigation" to indicate that it is a navigation landmark. The h2 element provides a heading for the menu, which can be helpful for screen reader users. The ul element contains the menu items, which are marked up as links. By default, screen readers will announce each link as "link," which may not provide enough context for some users. To improve this, ARIA attributes can be used to provide additional information:

<nav role="navigation">
              <h2>Menu</h2>
              <ul>
                <li><a href="#" aria-current="page">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </nav>
            

In this updated example, the aria-current attribute has been added to the "Home" link to indicate that it is the current page. This can be helpful for users who are navigating the site using a screen reader or other assistive technology. Additionally, ARIA can be used to mark up more complex UI components like tabs and dialogs, providing additional context and accessibility for users.

This talks about making your website or application web accessible using automated accessibility testing tools, such as the WAVE Web Accessibility Evaluation Tool, and perform manual accessibility testing with assistive technology, such as screen readers and keyboard-only navigation" cannot be explained with code, as it involves using external tools and assistive technology to test the accessibility of a website or application.

However, here are some examples of automated accessibility testing tools that can be used to test the accessibility of a website:

1. WAVE Web Accessibility Evaluation Tool: https://wave.webaim.org/
2. AChecker: https://achecker.ca/checker/index.php
3. Axe: https://www.deque.com/axe/
4. Siteimprove Accessibility Checker: https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc

And here are some examples of assistive technology that can be used to perform manual accessibility testing:

1. Screen readers, such as NVDA (https://www.nvaccess.org/) and VoiceOver (https://www.apple.com/accessibility/mac/vision/)
2. Keyboard-only navigation, where the mouse is not used at all and all interaction is performed using the keyboard
3. Zoom tools, to simulate low vision and test the website's compatibility with screen magnifiers.