An Introduction to Web Accessibility

• The WAI and WCAG
• Why Web Accessibility is Important
• Accessibility Guidelines and Standards
• Implementing Accessibility Features
  • Text Alternatives
  • Keyboard Navigation
  • Focus Management
  • Semantic HTML
  • Accessible Forms
  • ARIA Attributes
  • Color Contrast and Legibility
  • Responsive Design
  • The 'Skip to content' link
• Testing Accessibility
• Summing up

Web accessibility is the practice of ensuring that websites and web applications can be used and understood by as many people as possible, including those with disabilities. Disabilities that can affect web accessibility include visual, auditory, cognitive, neurological, and motor impairments. By making a website accessible, you ensure that users with disabilities can navigate, interact with, and understand the content and functionality provided.

¶The WAI and WCAG

The Web Accessibility Initiative (WAI) are responsible for setting out guidelines on web accessibility, defining what is important and what features find their way into the framework called the WCAG.

The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making web content more accessible to people with disabilities. Developed by the World Wide Web Consortium (W3C), these guidelines are widely recognized as the international standard for web accessibility.

WCAG consists of three levels of conformance—A, AA, and AAA—with each level providing increasingly stringent accessibility requirements. The guidelines are organized under four main principles: perceivable, operable, understandable, and robust. By following these principles, developers can create websites and applications that are accessible to a broad range of users, including those with visual, auditory, cognitive, and motor impairments.

¶Why Web Accessibility is Important

There are several reasons why web accessibility is important:

• Inclusivity: An accessible website enables all users, regardless of their abilities, to access and engage with your content and services. This promotes inclusivity and creates a better user experience for everyone.
• Legal Compliance: Many countries have laws and regulations that require websites and web applications to be accessible. Ensuring that your website is accessible can help you avoid legal issues and potential fines.
• Better SEO: Many accessibility best practices, such as semantic markup and descriptive text, also improve search engine optimization (SEO). Accessible websites can rank higher in search results, leading to more traffic and engagement.
• Wider Audience: By making your website accessible, you increase the potential audience for your content and services. This can lead to higher user engagement, increased sales, and greater customer satisfaction.

¶Accessibility Guidelines and Standards

The Web Content Accessibility Guidelines (WCAG) are the most widely recognized set of accessibility standards. Developed by the World Wide Web Consortium (W3C), the WCAG provides a comprehensive set of guidelines and best practices for making web content accessible. The guidelines are organized into three levels of conformance (A, AA, and AAA), with Level A being the minimum and Level AAA being the most comprehensive.

In addition to the WCAG, there are other accessibility standards and guidelines, such as Section 508 in the United States and the European Union's Web Accessibility Directive. These standards often reference or are based on the WCAG.

¶Implementing Accessibility Features

There are many ways to improve the accessibility of your website or web application. In this section we will go through a number of tangible features you can implement in order to better support your users. This is not a complete list, and some sites may have additional requirements depending on your content and the level (A, AA or AAA) that you wish to achieve.

¶Text Alternatives

Provide text alternatives for non-text content, such as images, audio, and video. This includes using alt attributes for images and providing transcripts or captions for audio and video content. Text alternatives enable users with visual or auditory impairments to understand the content through screen readers or other assistive technologies.

Example:

<img src="example-image.jpg" alt="A description of the image content" />

¶Keyboard Navigation

Ensure that your website or application can be fully navigated using only he keyboard. This is important for users with motor impairments who may not be able to use a mouse or other pointing devices. Make sure that all interactive elements, such as links, buttons, and form controls, are keyboard-accessible and have visible focus indicators.

:focus {
  outline: 2px solid #000;
}

¶Focus Management

Proper focus management is crucial for keyboard navigation and screen reader users. When opening and closing modal dialogs, menus, or other interactive components, ensure that focus is moved to the appropriate element and restored when the component is closed.

Example using JavaScript:

const modal = document.getElementById("myModal");
const trigger = document.getElementById("myBtn");
const closeButton = document.getElementsByClassName("close")[0];

trigger.onclick = function() {
  modal.style.display = "block";
  closeButton.focus();
}

closeButton.onclick = function() {
  modal.style.display = "none";
  trigger.focus();
}

¶Semantic HTML

Use semantic HTML elements to convey the structure and meaning of your content. This makes it easier for screen readers and other assistive technologies to interpret the content. Examples of semantic elements include <header>, <nav>, <main>, <article>, and <footer>.

Example:

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
</main>
<footer>
  <p>&copy; 2023. All rights reserved.</p>
</footer>

¶Accessible Forms

Forms are usually one of the most interactive features of a website, therefore they require extra attention when considering web accessibility. Ensure that your forms are accessible by using proper markup, including <label> elements associated with form controls using the for attribute, and grouping related form controls with <fieldset> and <legend> elements. Also, provide clear error messages and instructions to help users understand how to complete the form.

Example:

<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  <fieldset>
    <legend>Preferences</legend>
    <label for="newsletter">Subscribe to our newsletter:</label>
    <input type="checkbox" id="newsletter" name="newsletter">
  </fieldset>
  <button type="submit">Submit</button>
</form>

¶ARIA Attributes

Use Accessible Rich Internet Applications (ARIA) attributes to enhance the accessibility of your website or application when native HTML elements do not provide sufficient information or functionality. ARIA attributes can be used to convey roles, states, and properties that are not available through standard HTML elements.

ARIA is a large topic of discussion - there are lots of ARIA attributes and options and there is a mixture of support across browsers and screenreaders. The below example is just that, an example, it is not a definitive ARIA guide.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

¶Color Contrast and Legibility

Ensure that your text and background colors provide sufficient contrast for users with visual impairments. The WCAG recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Use tools like the WebAIM Color Contrast Checker to verify that your color choices meet these guidelines.

Example:

.element {
  color: #333;
  background-color: #fff;
}

¶Responsive Design

Create a responsive design that adapts to different screen sizes and devices. This makes your website or application more accessible for users with low vision or those using assistive technologies like screen magnifiers. Use CSS media queries and flexible layouts to ensure your content is legible and usable on various devices.

Example:

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

@media screen and (max-width: 768px) {
  .container {
    padding: 0 10px;
  }
}

¶The 'Skip to content' link

One of the quickest wins with web accessibility is the skip to content link. This link simply needs to point to an anchor where your actual content begins on the page. The link needs to be visible to screen readers, but technically it can be hidden for other users if aesthetics is important to you, although we do recommend showing it wherever you can.

The 'content' of your page should be the main body of the document, skipping the navigation and any larger headers or images you may have. It's used primarily for screen reader users who have no interest in aesthetics and just want to get to the content.

Using semantic HTML and having a <main> element with your content in helps with this too. Ensure your skip to content link is one of the first elements on the page, usually above your main navigation.

<a href="#content">Skip to content</a>

<!-- [...] -->

<main id="content">

¶Testing Accessibility

Regularly test your website or application for accessibility issues using a combination of automated tools, manual testing, and user feedback. Some popular tools for automated accessibility testing include:

• axe-core
• Lighthouse
• WAVE

Remember that automated tools can only identify a portion of potential accessibility issues. It is essential to conduct manual testing and involve users with disabilities in the testing process to ensure a fully accessible experience.

¶Summing up

Web accessibility is a vital aspect of web development that ensures all users, regardless of their abilities, can access and engage with your content and services. By following accessibility best practices and guidelines, you can create a more inclusive, user-friendly, and legally compliant website or application. This not only benefits users with disabilities but also leads to a better experience for all users, improved SEO, and a broader audience reach.