Web Content Accessibility Guidelines (WCAG)

Web Content Accessibility Guidelines (WCAG) are a set of guidelines that ensure that websites are accessible to all users, including those with disabilities. The guidelines are divided into four principles: Perceivable, Operable, Understandable, and Robust (POUR).

WCAG Levels:

A level: Basic web accessibility features. This level addresses the most basic web accessibility features.

AA level: Deals with the biggest and most common barriers for disabled users. This level is generally the target for most websites.

AAA level: The highest and most complex level of web accessibility. This level is typically not required for most websites as it is very difficult to achieve.

Color Contrast

The contrast between the text color and the background color should be at least 4.5:1 for normal text and 3:1 for large text.

You can easily check the contrast of your website using this contrast checker link.

Or you can use the contrast checker tool in the Chrome browser. Right click on the text and select "Inspect". Then click on the "Contrast ratio" tab.

This is an example of good contrast. The text color is black, and the background color is white. You can check the contrast of this text using the contrast checker tool or Browser contrast checker.

This is an example of bad contrast. The text color is light gray, and the background color is light gray. You can check the contrast of this text using the contrast checker tool or Browser contrast checker.

Example Contrast Ratios:

Alternative Text

Alternative text is a text description that can be added to an image's HTML tag. This text is read by screen readers to describe the image to visually impaired users. The alt text should be descriptive and provide the same information as the image. If the image is purely decorative, the alt text should be empty.

Example of an image with alt text: <img src="./info.jpeg" alt="A person using a screen reader to access a website" class="img" />

Example of an image with empty alt text: <img src="./decorative.jpeg" alt="" class="img" />

Links

Links should be descriptive and provide information about the destination of the link. Screen readers read out the link text to users, so it should be clear and concise. Avoid using generic text like "click here" or "read more" as it does not provide any context to the user.

Example of a descriptive link: WCAG Quick Reference <a href="https://www.w3.org/WAI/WCAG21/quickref/" class="link">WCAG Quick Reference</a>

Example of a non-descriptive link: Click here <a href="https://www.w3.org/WAI/WCAG21/quickref/" class="link">Click here</a>

Labels

Labels are used to describe form elements such as input fields, checkboxes, radio buttons, and select dropdowns. Labels should be associated with their corresponding form elements using the "for" attribute on the label tag. This allows screen readers to read out the label when the form element is focused. Labels should be descriptive and provide context to the user.

Best practices for using labels:

1. Always use a label for each form element to ensure accessibility.
2. Make sure the label is descriptive and provides enough context.
3. Use the "for" attribute to associate the label with the form element by matching the "for" attribute value with the "id" of the form element.
4. For checkboxes and radio buttons, place the label text to the right of the form element for better readability.
5. For select dropdowns, use a label to describe the purpose of the dropdown.

You can use the following HTML to associate a label with a form element: <label for="name">Name:</label> <input type="text" id="name" />

You can also wrap the input field inside the label tag to associate them: <label>Name: <input type="text" /></label>

Example of a label associated with an input field: Name: <label for="name">Name:</label> <input type="text" id="name" />

Example of a label associated with a checkbox: Subscribe to newsletter <label for="subscribe">Subscribe to newsletter</label> <input type="checkbox" id="subscribe" />

Example of a label associated with radio buttons: Male Female <label for="gender-male">Male</label> <input type="radio" id="gender-male" name="gender" value="male" /> <label for="gender-female">Female</label> <input type="radio" id="gender-female" name="gender" value="female" />

Example of a label associated with a select dropdown: Country: United States Canada United Kingdom <label for="country">Country:</label> <select id="country"> <option value="us">United States</option> <option value="ca">Canada</option> <option value="uk">United Kingdom</option> </select>

Semantic HTML

Using semantic HTML elements helps screen readers and other assistive technologies understand the structure of the content. Some common semantic elements include headings, paragraphs, lists, and links. By using these elements appropriately, you can improve the accessibility and user experience of your website.

Here are some examples of semantic HTML elements:

• <header> - Defines a header for a document or section.
• <nav> - Defines navigation links.
• <main> - Defines the main content of a document.
• <article> - Defines an article or blog post.
• <section> - Defines a section of a document.
• <aside> - Defines content aside from the main content.
• <footer> - Defines a footer for a document or section.

By using these elements, you can create a more accessible and user-friendly website for all users. For example, screen readers can navigate through the content more easily, and users with disabilities can better understand the structure of the page. Additionally, search engines can use semantic HTML to better understand and index your content.

Here is an example of how you can use semantic HTML elements to structure your content: <header>
  <h1>Web Content Accessibility Guidelines (WCAG)</h1>
</header>
<nav>
  <ul>
    <li><a href="#color-contrast">Color Contrast</a></li>
    <li><a href="#alternative-text">Alternative Text</a></li>
    <li><a href="#links">Links</a></li>
    <li><a href="#labels">Labels</a></li>
  </ul>
</nav>
<main>
  <h2>Perceivable:</h2>
  <p>Information and user interface components must be presentable to users in ways they can perceive.</p>
</main>
<footer>
  <p>Copyright © 2021 Your Company. All rights reserved.</p>
</footer>

By using semantic HTML elements, you can create a more accessible and user-friendly website that benefits all users. Remember to test your website for accessibility and make any necessary adjustments to ensure compliance with WCAG guidelines.

Lists

Any consecutive items in a list are separated by list item elements. The list item elements are defined by the <li> tag. The <ul> tag is used to create an unordered list, and the <ol> tag is used to create an ordered list. The <dl> tag is used to create a definition list.

Lists are a great way to organize content on your website and make it more accessible to users. There are three main types of lists in HTML: ordered lists, unordered lists, and definition lists.

Ordered lists are used to display a list of items in a specific order, such as a numbered list. Unordered lists are used to display a list of items without any specific order, such as a bulleted list. Definition lists are used to display a list of terms and their definitions.

Here are some examples of lists in HTML:

• Ordered List:
  1. Item 1
  2. Item 2
  3. Item 3
• Unordered List:
  • Item 1
  • Item 2
  • Item 3
• Definition List:

  Term 1

  Definition 1

  Term 2

  Definition 2

  Term 3

  Definition 3

Headings

Headings are used to define the structure of a web page and provide hierarchy to the content. There are six levels of headings in HTML, ranging from <h1> (the most important) to <h6> (the least important). Headings help users navigate the content of a page and understand the relationship between different sections.

Screen reader users navigate a web page by jumping between headings, so it's important to use headings to create a logical structure for your content. Headings should be used to introduce new sections of content and provide context to the user. Only one <h1> should be used per page, and the other headings should follow a logical order. Apply hedings for structure, not for styling.

Here is an example of how headings can be used to structure a web page: <h1>Main Heading</h1>
<h2>Subheading 1</h2>
<p>Content goes here...</p>
<h2>Subheading 2</h2>
<p>Content goes here...</p>
<h3>Sub-subheading 1</h3>
<p>Content goes here...</p>
<h3>Sub-subheading 2</h3>
<p>Content goes here...</p>

ARIA(Accessible Rich Internet Applications)

ARIA provides a way to make web content and web applications more accessible to people with disabilities. It is a set of attributes that can be added to HTML elements to define their roles, states, and properties. ARIA is especially useful for dynamic content and interactive elements that are not natively accessible to screen readers and other assistive technologies.

Some common ARIA attributes include:

• role - Defines the role of an element (e.g., button, link, menu).
• aria-label - Provides a label for an element that is not visible on the screen.
• aria-labelledby - References the ID of another element that serves as the label for the current element.
• aria-describedby - References the ID of another element that provides a description for the current element.
• aria-hidden - Indicates whether an element is visible or hidden to screen readers.
• aria-live - Defines how live regions should be announced by screen readers.

ARIA Live Regions

ARIA live regions are used to announce dynamic content changes to screen reader users. Live regions can be set to different levels of verbosity to control how and when the content is announced. There are three main values for the aria-live attribute:

• off - The content is not announced by the screen reader.
• polite - The content is announced when the user is idle (e.g., after completing a task).
• assertive - The content is announced immediately, interrupting the current screen reader output.

By using ARIA attributes and live regions, you can enhance the accessibility of your web content and provide a better experience for users with disabilities. Remember to test your website with screen readers and other assistive technologies to ensure that it is fully accessible.

Accessible JavaScript

JavaScript is a powerful tool for creating interactive and dynamic web content, but it can also introduce accessibility barriers if not implemented correctly. Here are some best practices for creating accessible JavaScript:

• Use semantic HTML elements to provide structure and context to your content.
• Ensure that interactive elements are keyboard accessible and focusable.
• Provide alternative text for images and other non-text content.
• Use ARIA attributes to define roles, states, and properties of elements.
• Avoid using JavaScript to change the page structure or content without user interaction.
• Test your website with screen readers and other assistive technologies to ensure accessibility.

Skip Navigation

Skip navigation links are hidden links that allow users to skip over repetitive content and navigate directly to the main content of a web page. Skip navigation links are especially useful for keyboard and screen reader users who may have difficulty navigating through long lists of links or menus.

Here is an example of a skip navigation link: <a href="#main-content" class="skip-link">Skip to main content</a>
.skip-link{ left:100%; transform: translate(100%,0); opacity:0; }

The skip navigation link should be the first focusable element on the page and should be hidden from sighted users until it receives focus. When the link is focused, it should become visible and allow users to jump directly to the main content of the page.

Resources:

If you have any questions or need further assistance with web accessibility, feel free to reach out to me. I'm here to help! Click here to Contact me

• WCAG Quick Reference
• WebAIM Contrast Checker