wcag-reference

Gets a reference to any of the WCAG resources for you!

In fact there are 4 documents for each WCAG version:

• the WCAG guideline itself
• a quick reference "How to Meet WCAG 2.x"
• a detailed reference "Understanding WCAG 2.x"
• explained techniques to meet the WCAG

This tool can give you a reference to the following documents:

• WCAG 2.0
  • https://www.w3.org/TR/WCAG20/
  • https://www.w3.org/WAI/WCAG20/quickref/
  • https://www.w3.org/TR/UNDERSTANDING-WCAG20/
  • https://www.w3.org/TR/WCAG20-TECHS/
• WCAG 2.1:
  • https://www.w3.org/TR/WCAG21/
  • https://www.w3.org/WAI/WCAG21/quickref/
  • https://www.w3.org/WAI/WCAG21/Understanding/
  • https://www.w3.org/WAI/WCAG21/Techniques/
• WCAG 2.2:
  • https://www.w3.org/TR/WCAG22/
  • https://www.w3.org/WAI/WCAG22/quickref/
  • https://www.w3.org/WAI/WCAG22/Understanding/
  • https://www.w3.org/WAI/WCAG22/Techniques/

Installation

npm i wcag-reference

Usage

Currently there are the following commands available. You are free to contribute, if you feel like there could be more!

Get a link to a specific success criterion

getLinkToCriterion(version, chapter, section, subsection)

• version: needs to be either '2.0', '2.1' or '2.2'
• chapter, section, subsection: needs to be a valid bullet point from the selected WCAG Version

Example:

import { getLinkToCriterion } from 'wcag-reference';

const link = getLinkToCriterion('2.2', 3, 3, 4);
// → 'https://www.w3.org/TR/WCAG22/#error-prevention-legal-financial-data'

Get a link to a specific technique

getLinkToTechnique(version, technique)

• version: needs to be either '2.0', '2.1' or '2.2'
• technique: needs to be a valid technique

Example:

import { getLinkToTechnique } from 'wcag-reference';

const link = getLinkToTechnique('2.0', 'SCR27');
// → 'https://www.w3.org/TR/WCAG20-TECHS/SCR27.html'

Get all available data for a specific success criterion

getCriterionData(version, chapter, section, subsection)

• version: needs to be either '2.0', '2.1' or '2.2'
• chapter, section, subsection: needs to be a valid bullet point from the selected WCAG Version

Example:

import { getCriterionData } from 'wcag-reference';

const data = getCriterionData('2.1', 2, 1, 1);
// → {
//   id: 'keyboard',
//   handle: '2.1.1 Keyboard',
//   quickReference: 'https://www.w3.org/WAI/WCAG21/quickref/#keyboard',
//   detailedReference: 'https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html',
//   level: 1, // → 1: A, 2: AA, 3: AAA
//   wcagUrl: 'https://www.w3.org/TR/WCAG21/'
// }

Get all available data for a specific technique

getTechniqueData(version, chapter, section, subsection)

• version: needs to be either '2.0', '2.1' or '2.2'
• technique: needs to be a valid technique

Example:

import { getTechniqueData } from 'wcag-reference';

const data21 = getTechniqueData('2.1', 'G57');
// → {
//   text: 'G57: Ordering the content in a meaningful sequence',
//   techniquesUrl: 'https://www.w3.org/WAI/WCAG21/Techniques/',
//   groupId: 'general',
//   groupPage: undefined
// }
const data20 = getTechniqueData('2.0', 'G57');
// → {
//   text: 'G57: Ordering the content in a meaningful sequence',
//   techniquesUrl: 'https://www.w3.org/TR/WCAG20-TECHS/',
//   groupId: undefined,
//   groupPage: 'general.html'
// }

How does this tool work?

You can find a ./data/data.js which contains all necessary informations. This file is generated by scraping the above mentioned sites. If you want to, you can include this file by yourself:

import wcagReferenceData from 'wcag-reference/data/data.js';

You can find the generating scripts also in the ./data/ folder. But these files aren't included in the final npm package. If you want to create the file yourself simply type:

node ./data/generate-data.js