Web Accessibility Testing with the Core Concept Check Sheet and WAVE Tool GAAD at WSU May 16, 2024

Introduction

This tutorial will guide you through the process of testing web accessibility using the Core Concept Check Sheet and the WAVE Tool. By following these steps, you will learn how to identify and correct accessibility issues related to headings, links, lists, and images. Understanding web accessibility is crucial for creating inclusive digital content that can be accessed by all users, including those with disabilities.

Step 1: Familiarize Yourself with the Core Concept Check Sheet

The Core Concept Check Sheet is a valuable resource for quickly identifying common accessibility issues.

• Download the Check Sheet: Obtain the PDF version of the Core Concept Check Sheet from a reliable source.
• Review the Key Areas: Focus on the following elements:
  • Headings: Ensure they are used in a logical order (H1, H2, H3, etc.).
  • Links: Check that all links are descriptive and functional.
  • Lists: Confirm that lists are properly formatted using
    ,
    , and
    1. tags.
    2. Images: Ensure all images have appropriate alt text.

  Practical Tip

  Use the check sheet as a checklist while reviewing your web pages to ensure that no critical elements are overlooked.

  Step 2: Use the WAVE Web Accessibility Evaluation Tool

  The WAVE Tool helps you evaluate the accessibility of your web pages and provides actionable feedback.

  • Access the WAVE Tool: Go to the WAVE website (wave.webaim.org).
  • Enter Your URL: Input the URL of the web page you want to test and click “Submit.”
  • Review the Results: Analyze the report generated by the tool. Look for:
    • Errors: These indicate significant accessibility issues that need to be addressed.
    • Alerts: These are suggestions for improvements but may not be critical.
    • Features: Positive elements that enhance accessibility.

  Common Pitfalls to Avoid

  • Do not ignore the errors reported by WAVE; prioritize fixing them based on their severity.
  • Ensure you test multiple pages, especially if your site has a complex structure.

  Step 3: Correct Identified Issues

  Once you have identified the accessibility issues, take the following steps to correct them:

  • Headings: Adjust the heading structure to ensure a logical flow. For example:

    <h1>Main Title</h1>
    <h2>Subsection Title</h2>
    <h3>Detail Title</h3>
    

  • Links: Update link text to be descriptive. Instead of “click here,” use “read more about accessibility best practices.”
  • Lists: Ensure lists are properly nested. For instance:

    <ul>
        <li>First item</li>
        <li>
            Second item
            <ul>
                <li>Sub-item</li>
            </ul>
        </li>
    </ul>
    

  • Images: Add alt text to images to describe their content. For example:

    <img src="image.jpg" alt="A description of the image">
    

  Conclusion

  By utilizing the Core Concept Check Sheet and the WAVE Web Accessibility Evaluation Tool, you can effectively identify and rectify accessibility issues on your web pages. These steps not only enhance user experience but also ensure compliance with accessibility standards. To further improve your web accessibility skills, consider exploring additional resources and testing tools. Regular testing and updates will keep your site inclusive and user-friendly.