VPAT Project — Create a Full Accessibility Conformance Report

In this tutorial, you will learn about VPAT Project. We cover key concepts, practical examples, and best practices to help you master this topic.

The VPAT project applies everything from the module by creating a complete VPAT 2.4 for a product, including product overview, criteria table with ratings and remarks, disclaimers, and submission checklist.

What You'll Learn

You will create a complete VPAT 2.4 Accessibility Conformance Report for a product of your choice, practicing every step from evaluation through documentation and submission preparation.

Why It Matters

Theory without practice is forgettable. Creating a real VPAT gives you hands-on experience that prepares you to produce VPATs for your organization or clients.

Real-World Use

DodaTech uses this same Process to create VPATs for its products. Each VPAT goes through the same stages: scope definition, evaluation, criteria table, remarks, disclaimers, and submission.

flowchart LR
  A[Define Scope] --> B[Evaluate Pages]
  B --> C[Fill Criteria Table]
  C --> D[Write Remarks]
  D --> E[Add Disclaimers]
  E --> F[Generate PDF]
  F --> G[Submit]
  A:::current
  classDef current fill:#f90,color:#fff,stroke:#333,stroke-width:2px

Project Requirements

Complete the following deliverables for a product of your choice:

1. Product overview section with name, version, and description
2. Scope definition listing evaluated pages and features
3. Criteria table with at least 15 WCAG 2.2 AA criteria rated Supports, Partially Supports, Does Not Support, or Not Applicable
4. Detailed remarks for each criterion using the four-part structure
5. Legal disclaimers section
6. Version history table
7. Submission checklist

Deliverable Template

// VPAT project deliverable structure
const vpatProject = {
  product: {
    name: 'Your Product Name',
    version: '1.0.0',
    description: 'Brief product description',
    vendor: 'Your Company',
    evaluationDate: '2026-06-28'
  },

  scope: {
    pages: ['Home page', 'Dashboard', 'Settings', 'Search results', 'User profile'],
    browsers: ['Chrome 125', 'Firefox 126', 'Safari 17'],
    assistiveTech: ['NVDA 2024', 'VoiceOver (macOS 14)'],
    conformanceTarget: 'WCAG 2.2 AA'
  },

  evaluationMethods: {
    automated: 'axe DevTools 4.8',
    manualKeyboard: true,
    screenReader: 'NVDA 2024, VoiceOver',
    codeReview: true
  },

  generateOverviewHTML() {
    return `<section aria-labelledby="product-info">
      <h2 id="product-info">Product Information</h2>
      <dl>
        <dt>Product</dt><dd>${this.product.name}</dd>
        <dt>Version</dt><dd>${this.product.version}</dd>
        <dt>Date</dt><dd>${this.product.evaluationDate}</dd>
        <dt>Conformance Target</dt><dd>${this.scope.conformanceTarget}</dd>
      </dl>
    </section>`;
  }
};

console.log(vpatProject.generateOverviewHTML());

Expected output:

<section aria-labelledby="product-info">
  <h2 id="product-info">Product Information</h2>
  <dl>
    <dt>Product</dt><dd>Your Product Name</dd>
    <dt>Version</dt><dd>1.0.0</dd>
    <dt>Date</dt><dd>2026-06-28</dd>
    <dt>Conformance Target</dt><dd>WCAG 2.2 AA</dd>
  </dl>
</section>

Criteria Table Template

Create a table with these columns: Criteria ID, Title, Level, Rating, and Remarks. Include at least 15 entries with a realistic distribution of ratings.

<table aria-label="WCAG criteria evaluation">
  <caption>WCAG 2.2 AA Criteria Evaluation</caption>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Title</th>
      <th scope="col">Level</th>
      <th scope="col">Rating</th>
      <th scope="col">Remarks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1.1</td>
      <td>Non-text Content</td>
      <td>A</td>
      <td>Supports</td>
      <td>All images have alt text. Decorative images use empty alt. Tested with NVDA 2024.</td>
    </tr>
    <tr>
      <td>1.4.3</td>
      <td>Contrast Minimum</td>
      <td>AA</td>
      <td>Partially Supports</td>
      <td>Primary text meets 4.5:1. Disabled buttons at 3.0:1. See Appendix A.</td>
    </tr>
  </tbody>
</table>

Project Checklist

• Product overview section complete
• Scope defined with pages, browsers, and AT
• At least 15 criteria evaluated
• Realistic distribution of ratings
• Remarks use four-part structure
• Legal disclaimers included
• Version history table created
• PDF generated (tagged)
• Submission checklist created

Common Mistakes

1. Rating Everything as Supports

A VPAT with Supports on every entry is not credible. Real products have issues. Be honest.

2. Writing the Same Remark for Every Criterion

Each criterion requires a unique remark. Copied remarks signal lack of thorough testing.

3. Forgetting the Product Overview

Buyers need to know exactly what product the VPAT covers. Include name, version, and description.

4. Not Defining the Scope

Without a defined scope, the buyer does not know what was tested and what was excluded.

5. Using Not Applicable Incorrectly

Criteria that clearly apply should not be marked Not Applicable. Defend each N/A with reasoning.

6. Skipping Legal Disclaimers

Disclaimers protect your organization. Do not skip the legal section.

7. Not Including a Version History

A version history shows the VPAT is maintained. First-time VPATs should still include a history with at least one entry.

Practice Questions

1. What are the six deliverables for this project?

Product overview, scope definition, criteria table with remarks, legal disclaimers, version history, and submission checklist.

2. How many criteria entries should the criteria table contain?

At least 15 entries across WCAG 2.2 AA.

3. Why is a realistic rating distribution important?

A VPAT with all Supports is not credible. Buyers expect some Partially Supports and Does Not Support entries.

4. What should you do if a criterion does not apply to your product?

Mark it as Not Applicable and explain in the remarks why it does not apply.

5. Challenge: Create a complete VPAT for a real website or application you use. Share it with a colleague for review.

FAQ

Mini Project

This is the final project for this module. Complete all six deliverables and review your VPAT against the pre-submission checklist.

What's Next

You have completed the VPAT module. Continue to Cognitive Accessibility to learn about designing for neurodivergent users. Or explore Accessibility in Design Systems for component-level a11y integration.