diff --git a/.eleventyignore b/.eleventyignore index a9be492c6d..9182ce02ed 100644 --- a/.eleventyignore +++ b/.eleventyignore @@ -19,6 +19,9 @@ understanding/*/identify-changes.html understanding/*/interruptions-minimum.html understanding/*/seizures.html +# Ignore typings +**/*.d.ts + # Ignore templates used for creating new documents **/*-template.html diff --git a/11ty/CustomLiquid.ts b/11ty/CustomLiquid.ts index f6a454b7e1..8835c00e1d 100644 --- a/11ty/CustomLiquid.ts +++ b/11ty/CustomLiquid.ts @@ -254,22 +254,10 @@ export class CustomLiquid extends Liquid { throw new Error("Incorrectly-nested Benefits section found: please resolve."); } - // XSLT orders resources then techniques last, opposite of source files - $("body") - .append("\n", $(`body > section#resources`)) - .append("\n", $(`body > section#techniques`)); - // Expand top-level heading and add box for guideline/SC pages if ($("section#intent").length) $("h1").replaceWith(generateIncludes("understanding/h1")); $("section#intent").before(generateIncludes("understanding/about")); - $("section#techniques h2").after(generateIncludes("understanding/intro/techniques")); - if ($("section#sufficient .situation").length) { - $("section#sufficient h3").after( - generateIncludes("understanding/intro/sufficient-situation") - ); - } - // Disallow handwritten success-criteria section (should be auto-generated) if ($("section#success-criteria").length) { console.error( @@ -281,21 +269,7 @@ export class CustomLiquid extends Liquid { // success-criteria template only renders content for guideline (not SC) pages $("body").append(generateIncludes("understanding/success-criteria")); - // Remove unpopulated techniques subsections - for (const id of ["sufficient", "advisory", "failure"]) { - $(`section#${id}:not(:has(:not(h3)))`).remove(); - } - - // Normalize subsection names for Guidelines (h2) and/or SC (h3) - $("section#sufficient h3").text("Sufficient Techniques"); - $("section#advisory").find("h2, h3").text("Advisory Techniques"); - $("section#failure h3").text("Failures"); - // Add intro prose to populated sections - $("section#advisory") - .find("h2, h3") - .after(generateIncludes("understanding/intro/advisory")); - $("section#failure h3").after(generateIncludes("understanding/intro/failure")); $("section#resources h2").after(generateIncludes("understanding/intro/resources")); // Expand techniques links to always include title @@ -438,8 +412,8 @@ export class CustomLiquid extends Liquid { if (scope.guideline?.level === "") $("section#techniques").remove(); } - // Process defined terms within #render, - // where we have access to global data and the about box's HTML + // Process defined terms within #render, where we have access to + // global data and the rendered HTML for the About box and related Techniques const $termLinks = $(termLinkSelector); const extractTermName = ($el: CheerioAnyNode) => { const name = $el diff --git a/11ty/README.md b/11ty/README.md index 60695a01a6..df942aaffe 100644 --- a/11ty/README.md +++ b/11ty/README.md @@ -28,6 +28,77 @@ Maintenance tasks (for working with Eleventy config and supporting files under t - `npm run check` checks for TypeScript errors - `npm run fmt` formats all TypeScript files +## Associated Techniques Data + +Each success criterion's page contains a Techniques section which links to associated techniques. +These used to be defined directly in HTML in each respective page, but have since been relocated to +a single data file, `understanding/understanding.11tydata.js`, under the key `associatedTechniques`. + +This field is typed, in order to provide some degree of autocomplete in IDEs that support TypeScript +(e.g. Visual Studio Code), as well as some amount of immediate feedback while editing. +Further validation is performed when running the build or dev server, to provide more focused error messages for common mistakes. + +### Listing Techniques + +Techniques may be indicated via an object as outlined below, or using a shorthand string. +Shorthand strings may function as either `id` or `title` seen below, and are +recommended for brevity when no `using` or `and` relationship is present. + +The following list outlines properties available on each technique object: + +- `id` - Technique ID +- `title` - Technique description (HTML flow content allowed), to define free-form entries that don't reference a specific technique +- `using` - Optional array of further techniques to be populated into a child list + - Child techniques may also include `using` +- `usingConjunction` - When `using` is specified, this overrides the word that appears before `usingQuantity` + - Default: `"using"`; HTML flow content allowed +- `usingQuantity` - When `using` is specified, this overrides the word that appears after `usingConjunction` and before "of the following techniques" + - Default: `"one"` + - May be empty string (`""`), in which case the subsequent "of" is dropped +- `usingPrefix` - Adds text to appear before `usingConjunction` +- `skipUsingPhrase` - Omits the entire "... using ... of the following techniques" phrase + - This is mainly an escape hatch for rare instances where a child list is used but no "using" phrase appears at all (e.g. in 1.4.4: Resize Text) + +Typically, either `id` or `title` is required. +If `id` is specified, then `prefix` and/or `suffix` may also be specified (with HTML flow content allowed in each), +resulting in "{prefix} {linked technique title} {suffix}". + +In extremely rare cases, `using` may be specified alone without either `id` or `title`, +e.g. for top-level "Using two or more of the following" in 2.4.5: Multiple Ways. + +#### Conjunctions + +To represent multiple parallel techniques, an `and` key may be specified instead of `id` or `title`. In this case, the following properties are supported: + +- `and` - an array of technique objects or shorthand strings (as described above) +- `using` and its related fields (seen above) may optionally be specified alongside `and` +- `andConjunction` may optionally be specified alongside `and`, + to override the default `"AND"` phrasing (e.g. in 4.1.3: Status Messages) +- Techniques listed _within_ `and` should be flat, never containing `and` or `using` + +### Situations or Other Subsections (Sufficient only) + +The top level of the `sufficient` array may consist entirely of either technique entries (see above) +or subsection entries. It should not contain a mix of both. + +Subsections are typically used to define multiple "situations", where each title begins with "Situation A:", "Situation B:", etc.; +in rare cases it is used for other purposes, e.g. in 1.4.8: Visual Presentation. + +Subsection entries contain the following: + +- `title` (required, HTML allowed) +- `techniques` (required) - array of technique entries (see above) +- `note` (optional, HTML allowed) - content to appear in a Note at the end of the subsection (e.g. in 4.1.3: Status Messages) +- `groups` (optional) - array of objects with `id`, `title`, `techniques`; see more below + - `techniques` within `groups` are not expected to involve `and` or `using` + +#### Groups within Situations + +Most of the situations in 1.1.1: Non-text Content include groupings which start with a boldface paragraph (not a heading), +and are referenced one or more times within preceding "using" clauses. +Groups can be defined at the top level of each situation/section entry as mentioned above. +Defining `groups` automatically implies a "using" relationship, without explicitly defining `using` for each technique. + ## Environment Variables ### `WCAG_CVSDIR` diff --git a/11ty/guidelines.ts b/11ty/guidelines.ts index b96f110fc9..f3e49a6294 100644 --- a/11ty/guidelines.ts +++ b/11ty/guidelines.ts @@ -35,10 +35,12 @@ export const actRules = ( JSON.parse(await readFile("guidelines/act-mapping.json", "utf8")) as ActMapping )["act-rules"]; -/** Version-dependent overrides of SC shortcodes for older versions */ -export const scSlugOverrides: Record string> = { - "target-size-enhanced": (version) => (version < "22" ? "target-size" : "target-size-enhanced"), -}; +/** Generates version-dependent overrides of SC shortcodes for older versions */ +export const generateScSlugOverrides = (version: WcagVersion): Record => ({ + ...(version < "22" && { + "target-size-enhanced": "target-size", + }), +}); /** * Flattened object hash, mapping each WCAG 2 SC slug to the earliest WCAG version it applies to. @@ -46,13 +48,14 @@ export const scSlugOverrides: Record string> = */ async function resolveScVersions(version: WcagVersion) { const paths = await glob("*/*.html", { cwd: "understanding" }); + const scSlugOverrides = generateScSlugOverrides(version); const map: Record = {}; for (const path of paths) { const [fileVersion, filename] = path.split("/"); assertIsWcagVersion(fileVersion); const slug = basename(filename, ".html"); - map[slug in scSlugOverrides ? scSlugOverrides[slug](version) : slug] = fileVersion; + map[slug in scSlugOverrides ? scSlugOverrides[slug] : slug] = fileVersion; } return map; diff --git a/11ty/techniques.ts b/11ty/techniques.ts index 231873696c..fe1814592d 100644 --- a/11ty/techniques.ts +++ b/11ty/techniques.ts @@ -1,15 +1,24 @@ -import type { Cheerio } from "cheerio"; import { glob } from "glob"; import matter from "gray-matter"; import capitalize from "lodash-es/capitalize"; +import lowerFirst from "lodash-es/lowerFirst"; import uniqBy from "lodash-es/uniqBy"; import { readFile } from "fs/promises"; import { basename } from "path"; -import { load, loadFromFile } from "./cheerio"; +import type { + UnderstandingAssociatedTechniqueArray, + UnderstandingAssociatedTechniqueGroup, + UnderstandingAssociatedTechniqueParent, + UnderstandingAssociatedTechniqueSection, +} from "understanding/understanding"; +import eleventyUnderstanding from "understanding/understanding.11tydata"; + +import { load } from "./cheerio"; import { assertIsWcagVersion, + generateScSlugOverrides, isSuccessCriterion, type FlatGuidelinesMap, type SuccessCriterion, @@ -63,11 +72,6 @@ interface TechniqueAssociation { with: string[]; } -function assertIsAssociationType(type?: string): asserts type is TechniqueAssociationType { - if (!techniqueAssociationTypes.includes(type as TechniqueAssociationType)) - throw new Error(`Association processed for unexpected section ${type}`); -} - /** * Pulls the basename out of a technique link href. * This intentionally returns empty string (falsy) if a directory link happens to be passed. @@ -87,78 +91,177 @@ export const understandingToTechniqueLinkSelector = [ .join(", ") as "a"; /** - * Returns object mapping technique IDs to SCs that reference it; - * comparable to technique-associations.xml but in a more ergonomic format. + * Given a shorthand string of either a technique ID or title, + * expands to an object with either the id or title property defined. + */ +export function expandTechniqueToObject(idOrTitle: string | O) { + if (typeof idOrTitle !== "string") return idOrTitle; // Already expanded + if (/^[A-Z]+\d+$/.test(idOrTitle)) return { id: idOrTitle as string }; + return { title: idOrTitle as string }; +} + +/** Convenience function used to report validation errors */ +function throwCriterionError(criterion: SuccessCriterion, description: string): never { + throw new Error(`Associated techniques for ${criterion.id} contains ${description}`); +} + +/** + * Returns object mapping technique IDs to SCs that reference it, + * essentially inverting understanding.11tydata.js. */ -export async function getTechniqueAssociations(guidelines: FlatGuidelinesMap) { +export async function getTechniqueAssociations( + guidelines: FlatGuidelinesMap, + version: WcagVersion +) { const associations: Record = {}; - const itemSelector = techniqueAssociationTypes.map((type) => `section#${type} li`).join(", "); + const associatedTechniques = eleventyUnderstanding({}).associatedTechniques; + const scOverrides = generateScSlugOverrides(version); - const paths = await glob("understanding/*/*.html"); - for (const path of paths) { - const criterion = guidelines[basename(path, ".html")]; - if (!isSuccessCriterion(criterion)) continue; - - const $ = await loadFromFile(path); - $(itemSelector).each((_, liEl) => { - const $liEl = $(liEl); - const $parentListItem = $liEl.closest("ul, ol").closest("li"); - // Identify which expected section the list was found under - const associationType = $liEl - .closest(techniqueAssociationTypes.map((type) => `section#${type}`).join(", ")) - .attr("id"); - assertIsAssociationType(associationType); - - /** Finds matches only within the given list item (not under child lists) */ - const queryNonNestedChildren = ($el: Cheerio, selector: string) => - $el.find(selector).filter((_, aEl) => $(aEl).closest("li")[0] === $el[0]); - - const $techniqueLinks = queryNonNestedChildren($liEl, understandingToTechniqueLinkSelector); - $techniqueLinks.each((_, aEl) => { - const usageParentIds = queryNonNestedChildren( - $parentListItem, - understandingToTechniqueLinkSelector - ) - .toArray() - .map((el) => resolveTechniqueIdFromHref(el.attribs.href)); - - // Capture the "X" in "X or more" phrasing, to include a phrase about - // combining with other techniques if more than one is required. - const descriptionDependencyPattern = - /(?:^|,?\s+)(?:by )?using\s+(?:(\w+) (?:or more )?of )?the\s+(?:following )?techniques(?: below)?(?::|\.)?\s*$/i; - const parentHtml = usageParentIds.length - ? null - : queryNonNestedChildren($parentListItem, "p").html(); - const match = parentHtml && descriptionDependencyPattern.exec(parentHtml); - const parentDescription = parentHtml - ? parentHtml.replace( - descriptionDependencyPattern, - !match?.[1] || match?.[1] === "one" ? "" : "when combined with other techniques" - ) - : ""; - const usageParentDescription = - parentDescription && - (parentDescription.startsWith("when") - ? parentDescription - : `when used for ${parentDescription[0].toLowerCase()}${parentDescription.slice(1)}`); - - const association: TechniqueAssociation = { + function addAssociation(id: string, association: TechniqueAssociation) { + if (!(id in associations)) associations[id] = [association]; + else associations[id].push(association); + } + + interface TraverseContext { + groups?: UnderstandingAssociatedTechniqueGroup[]; + parent?: UnderstandingAssociatedTechniqueParent; + } + /** Traverses one level of techniques; called recursively for `using`. */ + function traverse( + techniques: UnderstandingAssociatedTechniqueArray, + criterion: SuccessCriterion, + type: TechniqueAssociationType, + { groups, parent }: TraverseContext = {} + ) { + if (techniques.length < 1) throwCriterionError(criterion, "an empty array of techniques"); + + function resolveParentIds() { + if (!parent) return []; + if ("and" in parent) + return parent.and.reduce((ids, techniqueOrString) => { + const technique = expandTechniqueToObject(techniqueOrString); + if (technique.id) ids.push(technique.id); + return ids; + }, [] as string[]); + return parent.id ? [parent.id] : []; + } + + function resolveParentDescription() { + if (groups) return "using a more specific technique"; // Groups imply "using" + + if (!parent || !parent.using) return ""; + const { usingQuantity } = parent; + const isSingular = !usingQuantity || usingQuantity === "one"; + + if (isSingular) { + if ("title" in parent && parent.title) + return `when used for ${lowerFirst(parent.title.trim())}`; + else if ("and" in parent) { + const description = parent.and.reduce((description, technique) => { + const { title } = expandTechniqueToObject(technique); + if (title) + return `${description ? `${description} and ` : ""}${lowerFirst(title.trim())}`; + return description; + }, ""); + return `when used for ${description}`; + } + } + return "when combined with other techniques"; + } + + const usageParentIds = resolveParentIds(); + const commonAssociationData = { + criterion, + type: capitalize(type) as Capitalize, + hasUsageChildren: false, + usageParentIds, + usageParentDescription: usageParentIds.length ? "" : resolveParentDescription(), + } satisfies Partial; + + for (const techniqueOrString of techniques) { + const technique = expandTechniqueToObject(techniqueOrString); + if ("groups" in technique) + throwCriterionError( criterion, - type: capitalize(associationType) as Capitalize, - hasUsageChildren: !!$liEl.find("ul, ol").length, - usageParentIds, - usageParentDescription, - with: $techniqueLinks - .toArray() - .filter((el) => el !== aEl) - .map((el) => resolveTechniqueIdFromHref(el.attribs.href)), - }; - - const id = resolveTechniqueIdFromHref(aEl.attribs.href); - if (!(id in associations)) associations[id] = [association]; - else associations[id].push(association); - }); - }); + "`groups` in unexpected context (only valid in top-level sections)" + ); + + if ("and" in technique) { + if (technique.and.length < 2) + throwCriterionError(criterion, "`and` with less than 2 entries"); + for (const andEntry of technique.and) { + const expandedEntry = expandTechniqueToObject(andEntry); + if ("and" in expandedEntry || "using" in expandedEntry) + throwCriterionError( + criterion, + "invalid nested structure under `and` (cannot contain `and` or `using`)" + ); + if (!expandedEntry.id || !isSuccessCriterion(criterion)) continue; + addAssociation(expandedEntry.id, { + ...commonAssociationData, + hasUsageChildren: "using" in technique, + with: technique.and.reduce((ids, entry) => { + if (entry === andEntry) return ids; + const expandedEntry = expandTechniqueToObject(entry); + if (expandedEntry.id) ids.push(expandedEntry.id); + return ids; + }, [] as string[]), + }); + } + } else if (technique.id) { + addAssociation(technique.id, { + ...commonAssociationData, + hasUsageChildren: "using" in technique, + with: [], + }); + } + + if ("using" in technique) traverse(technique.using, criterion, type, { parent: technique }); + else if (Object.keys(technique).some((key) => key.startsWith("using"))) + throwCriterionError(criterion, "a using-related key but no `using` array"); + } + } + + for (const id of Object.keys(associatedTechniques)) { + const criterion = guidelines[scOverrides[id] || id]; + if (!criterion || !isSuccessCriterion(criterion)) continue; // Skip SCs not present in the version being processed + const association = associatedTechniques[id]; + + if ( + !("sufficient" in association) && + Object.keys(association).some((key) => key.startsWith("sufficient")) + ) { + throwCriterionError(criterion, "sufficient-related key but no `sufficient` array"); + } + + for (const type of techniqueAssociationTypes) { + if (!(type in association)) continue; + const topLevelEntries = association[type]; + if (!topLevelEntries?.length) + throwCriterionError(criterion, `empty \`${type}\` array; either add items, or omit it`); + + const sectionCount = topLevelEntries.filter( + (entry) => typeof entry !== "string" && "techniques" in entry + ).length; + if (sectionCount !== 0 && sectionCount !== topLevelEntries.length) + throwCriterionError(criterion, "a mix of top-level sections and techniques"); + + if (sectionCount) + for (const section of topLevelEntries as UnderstandingAssociatedTechniqueSection[]) { + if ("groups" in section && section.groups) { + if (section.techniques.some((t) => typeof t !== "string" && "using" in t)) + throwCriterionError( + criterion, + "`using` in the context of a section with groups; the latter already implies the former" + ); + traverse(section.techniques, criterion, type, { groups: section.groups }); + for (const group of section.groups) traverse(group.techniques, criterion, type); + } else { + traverse(section.techniques, criterion, type); + } + } + else traverse(topLevelEntries as UnderstandingAssociatedTechniqueArray, criterion, type); + } } // Remove duplicates (due to similar shape across understanding docs) and sort by SC number diff --git a/README.md b/README.md index 47ccc449c3..98af756e61 100644 --- a/README.md +++ b/README.md @@ -105,11 +105,13 @@ There is one Understanding file per success criterion, plus an index: * `understanding/index.html` - index page, need to uncomment or add a reference to individual Understanding pages as they are made available * `understanding/{version}/*.html` - files for each understanding page, named the same as the success criterion file in the guidelines -Files are populated with a template that provides the expected structure. Leave the template structure in place, and add content as appropriate within the sections. Elements with class="instructions" provide guidance about what content to include in that section; you can remove those elements if you want but don't have to. The template for examples proposes either a bullet list or a series of sub-sections, choose one of those approaches and remove the other from the template. The template for techniques includes sub-sections for "situations", remove that wrapper section if not needed. +Files are populated with a template that provides the expected structure. Leave the template structure in place, and add content as appropriate within the sections. Elements with class="instructions" provide guidance about what content to include in that section; you can remove those elements if you want but don't have to. The template for examples proposes either a bullet list or a series of sub-sections, choose one of those approaches and remove the other from the template. + +Note that associated techniques are no longer defined within each understanding page; they are now defined in the `associatedTechniques` field in `understanding/understanding.11tydata.js`. See [Associated Techniques Data](11ty/README.md#associated-techniques-data) for more information. Understanding files are referenced from the relevant Success Criterion on the WCAG specification; these links are put in by the script. -The formal publication location for Understanding pages is currently https://www.w3.org/WAI/WCAG21/Understanding/. This content is updated as needed; and may be automated. +The formal publication location for Understanding pages is currently https://www.w3.org/WAI/WCAG22/Understanding/. This content is updated as needed; and may be automated. ## Editing Techniques @@ -129,7 +131,7 @@ Techniques should include brief code examples to demonstrate how to author conte Cross references to other techniques may be provided where useful. Generally they should be provided in the "Related Techniques" section but can be provided elsewhere. Use a relative link to reference the technique, `{Technique ID}` if the same technology, or `../{Technology}/{Technique ID}` otherwise. If the technique is still under development and does not have a formal ID, reference the path to the development file. If the technique is under development in a different branch, use an absolute URI to the rawgit version of the technique. -Cross references to guidelines and success criteria should use a relative URI to the *Understanding* page for that item. Cross references to other parts of the guidelines should use an absolute URI to the guidelines as published on the W3C TR page, a URI beginning with `https://www.w3.org/TR/WCAG21/#`. Note that references to guidelines or success criteria to which techniques relate are added by the generator upon publication based on information in the Understanding documents, so redundant links to those is not normally needed or advised. +Cross references to guidelines and success criteria should use a relative URI to the *Understanding* page for that item. Cross references to other parts of the guidelines should use an absolute URI to the guidelines as published on the W3C TR page, a URI beginning with `https://www.w3.org/TR/WCAG22/#`. Note that references to guidelines or success criteria to which techniques relate are added by the generator upon publication based on information in the Understanding documents, so redundant links to those is not normally needed or advised. ### Create Techniques diff --git a/_includes/note.html b/_includes/note.html new file mode 100644 index 0000000000..57d183ab72 --- /dev/null +++ b/_includes/note.html @@ -0,0 +1,12 @@ +{%- comment -%} +Expected input: +- note = Text or HTML containing note text. +If note begins with an HTML element, it will be rendered inside of a div; +otherwise, it will be treated as flow content and rendered inside of a p. +{%- endcomment -%} +{%- assign strippedNote = note | strip %} +{%- assign noteStart = strippedNote | slice: 0 -%} +{%- capture noteTag %}{% if noteStart == "<" %}div{% else %}p{% endif %}{% endcapture %} +<{{ noteTag }} class="note"> + {{ strippedNote }} + diff --git a/_includes/understanding/techniques-entry.html b/_includes/understanding/techniques-entry.html new file mode 100644 index 0000000000..c81b935e5c --- /dev/null +++ b/_includes/understanding/techniques-entry.html @@ -0,0 +1,15 @@ +{%- comment -%} +Handles formatting for a single technique (no `using` or `and` handling). +Expected input: +- technique = technique object or shorthand +{%- endcomment -%} + +{% assign techniqueObj = technique | expand-technique %} +{%- if techniqueObj.prefix %}{{ techniqueObj.prefix }} {% endif -%} +{%- if techniqueObj.id -%} + {%- capture techniqueLink %}{{ techniqueObj.id | linkTechniques }}{% endcapture -%} + {{ techniqueLink }} +{%- elsif techniqueObj.title -%} + {{ techniqueObj.title }} +{%- endif -%} +{%- if techniqueObj.suffix %} {{ techniqueObj.suffix }}{% endif -%} diff --git a/_includes/understanding/techniques-list.html b/_includes/understanding/techniques-list.html new file mode 100644 index 0000000000..ea1a3a0b89 --- /dev/null +++ b/_includes/understanding/techniques-list.html @@ -0,0 +1,40 @@ +{%- comment -%} +Expected inputs: +- techniques = Array of technique objects or shorthand strings +- groups = Optional array of groups, if they exist in context (for referencing IDs) +{%- endcomment -%} +
    +{%- for technique in techniques %} +
  • + {% if technique.using %}

    {% endif %} + {%- if technique.and -%} + {%- assign andConjunction = technique.andConjunction | default: "AND" -%} + {%- for andEntry in technique.and %} + {% unless forloop.first %}{{ andConjunction }}{% endunless %} + {% include "understanding/techniques-entry.html", technique: andEntry %} + {%- endfor -%} + {%- else -%} + {%- include "understanding/techniques-entry.html", technique: technique -%} + {%- endif -%} + {% if groups -%} + {% # When groups are involved, generate a single "using" phrase joined by "AND" %} + {%- for group in groups -%} + {%- if forloop.first %} using {% else %} AND {% endif -%} + one of the following {{ group.title }} + {%- endfor -%} + {%- elsif technique.using %} + {%- unless technique.skipUsingPhrase -%} + {%- assign usingConjunction = technique.usingConjunction | default-strict: "using" -%} + {%- assign usingQuantity = technique.usingQuantity | default-strict: "one" -%} + {%- if technique.usingPrefix %} + {{ technique.usingPrefix }} + {%- endif %} + {{ usingConjunction }} + {{ usingQuantity }} {% if usingQuantity != "" %}of {% endif %}the following techniques + {%- endunless -%}: +

    + {% include "understanding/techniques-list.html", techniques: technique.using %} + {%- endif -%} +
    • +{% endfor -%} +
diff --git a/_includes/understanding/techniques-subsection.html b/_includes/understanding/techniques-subsection.html new file mode 100644 index 0000000000..03e5ae5a76 --- /dev/null +++ b/_includes/understanding/techniques-subsection.html @@ -0,0 +1,38 @@ +{%- comment -%} +Expected input: +- type = sufficient, advisory, or failure, corresponding to the Techniques subsection to list + +Also references global guideline and associatedTechniques data. +{%- endcomment -%} + +{% # Reference associatedTechniques via filename (not remapped for older versions) %} +{%- assign assocEntry = associatedTechniques[page.fileSlug] -%} +{%- if assocEntry[type][0].techniques -%} + {% # Top-level array contains sections/situations, not techniques %} + {%- for section in assocEntry[type] -%} + {%- assign titleStart = section.title | lstrip | slice: 0, 10 -%} + {%- assign isSituation = titleStart == "Situation " -%} + + {%- if forloop.first and isSituation and type == "sufficient" -%} + {% include "understanding/intro/sufficient-situation.html" %} + {%- endif -%} + + {%- comment -%} + Auto-generate ID for situations, but not for sections. + In the latter case, CustomLiquid will auto-generate IDs instead. + {%- endcomment -%} +
+

{{ section.title }}

+ {% include "understanding/techniques-list.html", techniques: section.techniques, groups: section.groups %} + {% for group in section.groups %} +

{{ group.title }}:

+ {% include "understanding/techniques-list.html", techniques: group.techniques %} + {% endfor %} + {%- if section.note -%}{% include "note.html", note: section.note %}{% endif -%} +
+ {%- endfor -%} +{%- else -%} + {% include "understanding/techniques-list.html", techniques: assocEntry[type] %} +{%- endif -%} diff --git a/_includes/understanding/techniques.html b/_includes/understanding/techniques.html new file mode 100644 index 0000000000..cb783756f0 --- /dev/null +++ b/_includes/understanding/techniques.html @@ -0,0 +1,47 @@ +{%- comment -%} +Entry point for Techniques section of Understanding pages. +Calls other understanding/techniques-* templates. +Data for associated techniques is defined in understanding/understanding.11tydata.js. +{%- endcomment -%} +
+

Techniques

+

+ Each numbered item in this section represents a technique or combination of techniques + that the Accessibility Guidelines Working Group deems sufficient for meeting this Success Criterion. + A technique may go beyond the minimum requirement of the criterion. There may be other ways of meeting the criterion not covered by these techniques. + For information on using other techniques, see + Understanding Techniques for WCAG Success Criteria, + particularly the "Other Techniques" section. +

+ + {% # Reference associatedTechniques via filename (not remapped for older versions) %} + {%- assign assocEntry = associatedTechniques[page.fileSlug] -%} + {%- if assocEntry.sufficient %} +
+

Sufficient Techniques

+ {%- if assocEntry.sufficientIntro %} +

{{ assocEntry.sufficientIntro }}

+ {% endif -%} + {% include "understanding/techniques-subsection.html", type: "sufficient" %} + {%- if assocEntry.sufficientNote -%} + {% include "note.html", note: assocEntry.sufficientNote | strip %} + {%- endif -%} +
+ {% endif -%} + + {%- if assocEntry.advisory %} +
+

Advisory Techniques

+ {% include "understanding/intro/advisory.html" %} + {% include "understanding/techniques-subsection.html", type: "advisory" %} +
+ {% endif -%} + + {%- if assocEntry.failure %} +
+

Failures

+ {% include "understanding/intro/failure.html" %} + {% include "understanding/techniques-subsection.html", type: "failure" %} +
+ {% endif -%} +
diff --git a/eleventy.config.ts b/eleventy.config.ts index 65311f56b6..766130781c 100644 --- a/eleventy.config.ts +++ b/eleventy.config.ts @@ -11,17 +11,18 @@ import { resolveDecimalVersion } from "11ty/common"; import { actRules, assertIsWcagVersion, + generateScSlugOverrides, getErrataForVersion, getFlatGuidelines, getPrinciples, getPrinciplesForVersion, getTermsMap, getTermsMapForVersion, - scSlugOverrides, type FlatGuidelinesMap, type WcagItem, } from "11ty/guidelines"; import { + expandTechniqueToObject, getFlatTechniques, getTechniqueAssociations, getTechniquesByTechnology, @@ -37,6 +38,8 @@ import type { EleventyContext, EleventyData, EleventyEvent } from "11ty/types"; const version = process.env.WCAG_VERSION || "22"; assertIsWcagVersion(version); +const scSlugOverrides = generateScSlugOverrides(version); + /** * Returns boolean indicating whether a technique is obsolete for the given version. * Tolerates undefined for use with hash lookups. @@ -78,7 +81,7 @@ const techniques = await getTechniquesByTechnology(flatGuidelines); const flatTechniques = getFlatTechniques(techniques); /** Maps technique IDs to SCs found in target version */ -const techniqueAssociations = await getTechniqueAssociations(flatGuidelines); +const techniqueAssociations = await getTechniqueAssociations(flatGuidelines, version); for (const [id, associations] of Object.entries(techniqueAssociations)) { // Prune associations from non-obsolete techniques to obsolete SCs techniqueAssociations[id] = associations.filter( @@ -86,7 +89,7 @@ for (const [id, associations] of Object.entries(techniqueAssociations)) { ); } /** Maps technique IDs to SCs only found in later versions */ -const futureTechniqueAssociations = await getTechniqueAssociations(futureGuidelines); +const futureTechniqueAssociations = await getTechniqueAssociations(futureGuidelines, version); /** Subset of futureTechniqueAssociations not overlapping with techniqueAssociations */ const futureExclusiveTechniqueAssociations: typeof techniqueAssociations = {}; @@ -163,13 +166,7 @@ if (process.env.WCAG_MODE === "editors") { } /** Applies any overridden SC IDs to incoming Understanding fileSlugs */ -function resolveUnderstandingFileSlug(fileSlug: string) { - if (fileSlug in scSlugOverrides) { - assertIsWcagVersion(version); - return scSlugOverrides[fileSlug](version); - } - return fileSlug; -} +const resolveUnderstandingFileSlug = (fileSlug: string) => scSlugOverrides[fileSlug] || fileSlug; export default async function (eleventyConfig: any) { for (const [name, value] of Object.entries(globalData)) eleventyConfig.addGlobalData(name, value); @@ -404,6 +401,14 @@ export default async function (eleventyConfig: any) { } ); + // Strict version of default that will only fall back on null or undefined (not e.g. "") + eleventyConfig.addFilter("default-strict", (value: any, fallback: any) => + value == null ? fallback : value + ); + + // Expands a technique shorthand string to an object with id or title + eleventyConfig.addFilter("expand-technique", expandTechniqueToObject); + // Renders a link to a GitHub commit or pull request eleventyConfig.addShortcode("gh", (id: string) => { if (/^#\d+$/.test(id)) { diff --git a/tsconfig.json b/tsconfig.json index ada8090aeb..16d850f6bc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,7 @@ { "compilerOptions": { + "allowJs": true, + "checkJs": true, "allowSyntheticDefaultImports": true, "baseUrl": ".", "module": "ES2022", @@ -8,5 +10,6 @@ "strict": true, "target": "ES2022", "verbatimModuleSyntax": true - } + }, + "include": ["*.ts", "11ty/**/*.ts", "understanding/*.11tydata.js", "understanding/*.d.ts"] } diff --git a/understanding/20/abbreviations.html b/understanding/20/abbreviations.html index d62ae3cb13..cc1789aa05 100644 --- a/understanding/20/abbreviations.html +++ b/understanding/20/abbreviations.html @@ -141,154 +141,7 @@

Resources for Abbreviations

-
-

Techniques for Abbreviations

- - -
-

Sufficient Techniques for Abbreviations

- - -
- -

Situation A: If the abbreviation has only one meaning within the web page: - -

- - - -
- -
- -

Situation B: If the abbreviation means different things within the same web page: - -

- - - -
- -
- -
-

Additional Techniques (Advisory) for Abbreviations

- -
- -
-

Failures for Abbreviations

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/audio-control.html b/understanding/20/audio-control.html index 596c7207fd..0a880a09df 100644 --- a/understanding/20/audio-control.html +++ b/understanding/20/audio-control.html @@ -67,38 +67,7 @@

Examples of Audio Control

Resources for Audio Control

-
-

Techniques for Audio Control

-
-

Sufficient Techniques for Audio Control

- -
-
-

Additional Techniques (Advisory) for Audio Control

-
-
-

Failures for Audio Control

- -
-
+ {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/audio-description-or-media-alternative-prerecorded.html b/understanding/20/audio-description-or-media-alternative-prerecorded.html index 27ea23274f..5cd03993bd 100644 --- a/understanding/20/audio-description-or-media-alternative-prerecorded.html +++ b/understanding/20/audio-description-or-media-alternative-prerecorded.html @@ -186,150 +186,7 @@

Resources for Audio Description or Media Alternative (Prerecorded)

-
-

Techniques for Audio Description or Media Alternative (Prerecorded)

- - -
-

Sufficient Techniques for Audio Description or Media Alternative (Prerecorded)

- - - - -
- -
-

Additional Techniques (Advisory) for Audio Description or Media Alternative (Prerecorded)

- - -
    - -
  • - - - -
    • - -
- -
- -
-

Failures for Audio Description or Media Alternative (Prerecorded)

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/audio-description-prerecorded.html b/understanding/20/audio-description-prerecorded.html index 872b7ce14e..fe25d7904f 100644 --- a/understanding/20/audio-description-prerecorded.html +++ b/understanding/20/audio-description-prerecorded.html @@ -155,117 +155,7 @@

Resources for Audio Description (Prerecorded)

-
-

Techniques for Audio Description (Prerecorded)

- - -
-

Sufficient Techniques for Audio Description (Prerecorded)

- - - - -
- -
-

Additional Techniques (Advisory) for Audio Description (Prerecorded)

- - -
    - -
  • - - - -
    • - -
- -
- -
-

Failures for Audio Description (Prerecorded)

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/audio-only-and-video-only-prerecorded.html b/understanding/20/audio-only-and-video-only-prerecorded.html index 46fb17dae7..351033fe9e 100644 --- a/understanding/20/audio-only-and-video-only-prerecorded.html +++ b/understanding/20/audio-only-and-video-only-prerecorded.html @@ -145,93 +145,7 @@

Resources for Audio-only and Video-only (Prerecorded)

-
-

Techniques for Audio-only and Video-only (Prerecorded)

- - -
-

Sufficient Techniques for Audio-only and Video-only (Prerecorded)

- - -
- -

Situation A: If the content is prerecorded audio-only:

- - - -
- -
- -

Situation B: If the content is prerecorded video-only:

- - - -
- -
- -
-

Additional Techniques (Advisory) for Audio-only and Video-only (Prerecorded)

- - -
    - -
  • - - - -
    • - -
- -
- -
-

Failures for Audio-only and Video-only (Prerecorded)

- - -
    - -
  • - - F30 - -
    • - -
  • - - F67 - -
    • - -
- -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/audio-only-live.html b/understanding/20/audio-only-live.html index 33267d64c0..be436192df 100644 --- a/understanding/20/audio-only-live.html +++ b/understanding/20/audio-only-live.html @@ -108,53 +108,7 @@

Resources for Audio-only (Live)

-
-

Techniques for Audio-only (Live)

- - -
-

Sufficient Techniques for Audio-only (Live)

- - - - -
- -
-

Additional Techniques (Advisory) for Audio-only (Live)

- - -
- -
-

Failures for Audio-only (Live)

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/bypass-blocks.html b/understanding/20/bypass-blocks.html index 4376c9a5e1..f8a396d521 100644 --- a/understanding/20/bypass-blocks.html +++ b/understanding/20/bypass-blocks.html @@ -147,117 +147,7 @@

Resources for Bypass Blocks

-
-

Techniques for Bypass Blocks

- - -
-

Sufficient Techniques for Bypass Blocks

- - - - -
- -
-

Additional Techniques (Advisory) for Bypass Blocks

- - - - -
- -
-

Failures for Bypass Blocks

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/captions-live.html b/understanding/20/captions-live.html index 8a0a1da67c..4d7366474c 100644 --- a/understanding/20/captions-live.html +++ b/understanding/20/captions-live.html @@ -81,92 +81,7 @@

Resources for Captions (Live)

-
-

Techniques for Captions (Live)

- - -
-

Sufficient Techniques for Captions (Live)

- - - - -
- -

Captions may be generated using real-time text translation service. - - -

- -
- -
- -
-

Additional Techniques (Advisory) for Captions (Live)

- - -
- -
-

Failures for Captions (Live)

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/captions-prerecorded.html b/understanding/20/captions-prerecorded.html index 12f5e5d201..961c21ab31 100644 --- a/understanding/20/captions-prerecorded.html +++ b/understanding/20/captions-prerecorded.html @@ -170,85 +170,7 @@

Other Captioning Resources

-
-

Techniques for Captions (Prerecorded)

- - -
-

Sufficient Techniques for Captions (Prerecorded)

- - - -
- -
-

Additional Techniques (Advisory) for Captions (Prerecorded)

- - -
- -
-

Failures for Captions (Prerecorded)

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/change-on-request.html b/understanding/20/change-on-request.html index 5bd74ffee8..f14d5cc705 100644 --- a/understanding/20/change-on-request.html +++ b/understanding/20/change-on-request.html @@ -133,190 +133,7 @@

Resources for Change on Request

-
-

Techniques for Change on Request

- - -
-

Sufficient Techniques for Change on Request

- - -
- -

Situation A: If the web page allows automatic updates:

- - - -
- -
- -

Situation B: If automatic redirects are possible:

- - - -
- -
- -

Situation C: If the web page uses pop-up windows:

- - - -
- -
- -

Situation D: If using an onchange event on a select element:

- - - -
- -
- -
-

Additional Techniques (Advisory) for Change on Request

- - - - -
- -
-

Failures for Change on Request

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/consistent-identification.html b/understanding/20/consistent-identification.html index 6e04d40e0d..cbe96707c4 100644 --- a/understanding/20/consistent-identification.html +++ b/understanding/20/consistent-identification.html @@ -127,75 +127,7 @@

Resources for Consistent Identification

-
-

Techniques for Consistent Identification

- - -
-

Sufficient Techniques for Consistent Identification

- - - - -
- -

Text alternatives that are "consistent" are not always "identical." For instance, - you may have a graphical arrow at the bottom of a web page that links to the next - web page. The text alternative may say "Go to page 4." Naturally, it would not be - appropriate to repeat this exact text alternative on the next web page. It would be - more appropriate to say "Go to page 5". Although these text alternatives would not - be identical, they would be consistent, and therefore would satisfy this success criterion. -

- -

A single non-text-content-item may be used to serve different functions. In such - cases, different text alternatives are necessary and should be used. Examples can - be commonly found with the use of icons such as check marks, cross marks, and traffic - signs. Their functions can be different depending on the context of the web page. - A check mark icon may function as "approved", "completed", or "included", to name - a few, depending on the situation. Using "check mark" as text alternative across all - web pages does not help users understand the function of the icon. Different text - alternatives can be used when the same non-text content serves multiple functions. -

- -
- -
- -
-

Additional Techniques (Advisory) for Consistent Identification

- -
- -
-

Failures for Consistent Identification

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/consistent-navigation.html b/understanding/20/consistent-navigation.html index dbc1b8d3a0..523d833b33 100644 --- a/understanding/20/consistent-navigation.html +++ b/understanding/20/consistent-navigation.html @@ -113,67 +113,7 @@

Resources for Consistent Navigation

-
-

Techniques for Consistent Navigation

- - -
-

Sufficient Techniques for Consistent Navigation

- - - - -
- -
-

Additional Techniques (Advisory) for Consistent Navigation

- - -
    - -
  • - - - -
    • - -
  • - - - -
    • - -
- -
- -
-

Failures for Consistent Navigation

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/contrast-enhanced.html b/understanding/20/contrast-enhanced.html index 91a02c992f..7cd4c05db9 100644 --- a/understanding/20/contrast-enhanced.html +++ b/understanding/20/contrast-enhanced.html @@ -312,109 +312,7 @@

Resources for Contrast (Enhanced)

-
-

Techniques for Contrast (Enhanced)

- - -
-

Sufficient Techniques for Contrast (Enhanced)

- - -
- -

Situation A: text is less than 18 point if not bold and less than 14 point if bold

- - - -
- -
- -

Situation B: text is as least 18 point if not bold and at least 14 point if bold

- - - -
- -
- -
-

Additional Techniques (Advisory) for Contrast (Enhanced)

- - - - -
- -
-

Failures for Contrast (Enhanced)

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/contrast-minimum.html b/understanding/20/contrast-minimum.html index 07fdd9ceab..41bdb0382d 100644 --- a/understanding/20/contrast-minimum.html +++ b/understanding/20/contrast-minimum.html @@ -289,75 +289,8 @@

Resources for Contrast (Minimum)

- -
-

Techniques for Contrast (Minimum)

-
-

Sufficient Techniques for Contrast (Minimum)

-
-

Situation A: text is less than 18 point if not bold and less than 14 point if bold

- -
-
-

Situation B: text is at least 18 point if not bold and at least 14 point if bold

- -
-
-
-

Additional Techniques (Advisory) for Contrast (Minimum)

- -
-
-

Failures for Contrast (Minimum)

- -
-
+ + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/error-identification.html b/understanding/20/error-identification.html index bc1cd96670..d1989bb2ce 100644 --- a/understanding/20/error-identification.html +++ b/understanding/20/error-identification.html @@ -126,58 +126,7 @@

Resources for Error Identification

-
-

Techniques for Error Identification

- -
-

Sufficient Techniques for Error Identification

- -
- -

Situation A: If a form contains fields for which information from the user is mandatory.

- - -
- -
- -

Situation B: If information provided by the user is required to be in a specific data - format or of certain values. -

- - -
-
- -
-

Additional Techniques (Advisory) for Error Identification

- - -
- -
-

Failures for Error Identification

- -
- -
+ {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/error-prevention-all.html b/understanding/20/error-prevention-all.html index e5d38d0fac..bcad970c59 100644 --- a/understanding/20/error-prevention-all.html +++ b/understanding/20/error-prevention-all.html @@ -66,26 +66,7 @@

Resources for Error Prevention (All)

-
-

Techniques for Error Prevention (All)

- - -
-

Sufficient Techniques for Error Prevention (All)

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/error-prevention-legal-financial-data.html b/understanding/20/error-prevention-legal-financial-data.html index 7c44f2c4e7..6262e02744 100644 --- a/understanding/20/error-prevention-legal-financial-data.html +++ b/understanding/20/error-prevention-legal-financial-data.html @@ -96,127 +96,7 @@

Resources for Error Prevention (Legal, Financial, Data)

-
-

Techniques for Error Prevention (Legal, Financial, Data)

- - -
-

Sufficient Techniques for Error Prevention (Legal, Financial, Data)

- - - - - - - - -
- -
-

Additional Techniques (Advisory) for Error Prevention (Legal, Financial, Data)

- - - - -
- -
-

Failures for Error Prevention (Legal, Financial, Data)

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/error-suggestion.html b/understanding/20/error-suggestion.html index e3798425d6..34e7279536 100644 --- a/understanding/20/error-suggestion.html +++ b/understanding/20/error-suggestion.html @@ -93,151 +93,7 @@

Resources for Error Suggestion

-
-

Techniques for Error Suggestion

- - -
- -

- In some cases, more than one of these situations may apply. For example, when a mandatory - field also requires the data to be in a specific format. - - -

- -
- -
-

Sufficient Techniques for Error Suggestion

- -
- -

Situation A: If information for a field is required to be in a specific data format:

- - - -
- -
- -

Situation B: Information provided by the user is required to be one of a limited set - of values: -

- - - -
- -
- -
-

Additional Techniques (Advisory) for Error Suggestion

- - - - -
- -

Client-Side Scripting Techniques (Advisory)

- - - -
- -
- -
-

Failures for Error Suggestion

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/extended-audio-description-prerecorded.html b/understanding/20/extended-audio-description-prerecorded.html index 9b66df36de..7ccc99c666 100644 --- a/understanding/20/extended-audio-description-prerecorded.html +++ b/understanding/20/extended-audio-description-prerecorded.html @@ -111,70 +111,7 @@

Resources for Extended Audio Description (Prerecorded)

-
-

Techniques for Extended Audio Description (Prerecorded)

- - -
-

Sufficient Techniques for Extended Audio Description (Prerecorded)

- - - - -
- -
-

Additional Techniques (Advisory) for Extended Audio Description (Prerecorded)

- - -
    - -
  • - - - -
    • - -
- -
- -
-

Failures for Extended Audio Description (Prerecorded)

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/focus-order.html b/understanding/20/focus-order.html index 227f36d75b..2c3664caac 100644 --- a/understanding/20/focus-order.html +++ b/understanding/20/focus-order.html @@ -183,66 +183,7 @@

Resources for Focus Order

-
-

Techniques for Focus Order

- -
-

Sufficient Techniques for Focus Order

- - -
- -
-

Additional Techniques (Advisory) for Focus Order

-
- -
-

Failures for Focus Order

- - - -
-
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/focus-visible.html b/understanding/20/focus-visible.html index 35a043d36c..1afc9a6217 100644 --- a/understanding/20/focus-visible.html +++ b/understanding/20/focus-visible.html @@ -81,79 +81,7 @@

Resources for Focus Visible

-
-

Techniques for Focus Visible

- - -
-

Sufficient Techniques for Focus Visible

- -
- -
-

Additional Techniques (Advisory) for Focus Visible

- -
- -
-

Failures for Focus Visible

- -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/headings-and-labels.html b/understanding/20/headings-and-labels.html index 69eaa68403..e619a4df6d 100644 --- a/understanding/20/headings-and-labels.html +++ b/understanding/20/headings-and-labels.html @@ -114,44 +114,7 @@

Resources for Headings and Labels

-
-

Techniques for Headings and Labels

- -
-

Sufficient Techniques for Headings and Labels

- - - - -
- -

- Headings and labels must be programmatically determined, per - Success Criterion 1.3.1. -

- -
- -
- -
-

Additional Techniques (Advisory) for Headings and Labels

- -
- -
-

Failures for Headings and Labels

- -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/help.html b/understanding/20/help.html index cf11ef3d93..6e39f7945d 100644 --- a/understanding/20/help.html +++ b/understanding/20/help.html @@ -78,102 +78,7 @@

Resources for Help

-
-

Techniques for Help

- - -
-

Sufficient Techniques for Help

- - -
- -

Situation A: If a form requires text input:

- - - -
- -
- -

Situation B: If a form requires text input in an expected data format:

- - - -
- -
- -
-

Additional Techniques (Advisory) for Help

- - - - -
- -
-

Failures for Help

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/images-of-text-no-exception.html b/understanding/20/images-of-text-no-exception.html index 384c98f46b..478e00f3de 100644 --- a/understanding/20/images-of-text-no-exception.html +++ b/understanding/20/images-of-text-no-exception.html @@ -149,98 +149,7 @@

Resources for Images of Text (No Exception)

-
-

Techniques for Images of Text (No Exception)

- - -
-

Sufficient Techniques for Images of Text (No Exception)

- - - - -
- -
-

Additional Techniques (Advisory) for Images of Text (No Exception)

- - -

CSS Techniques

- - - - -
- -
-

Failures for Images of Text (No Exception)

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/images-of-text.html b/understanding/20/images-of-text.html index 7ff9a8d211..0e8cbaa40c 100644 --- a/understanding/20/images-of-text.html +++ b/understanding/20/images-of-text.html @@ -137,35 +137,7 @@

Resources for Images of Text

-
-

Techniques for Images of Text

-
-

Sufficient Techniques for Images of Text

- -
- -
-

Additional Techniques (Advisory) for Images of Text

-
-

CSS Techniques

- -
-
- -
-

Failures for Images of Text

-
-
+ {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/info-and-relationships.html b/understanding/20/info-and-relationships.html index bd6ff7712c..f8d1ffe210 100644 --- a/understanding/20/info-and-relationships.html +++ b/understanding/20/info-and-relationships.html @@ -177,412 +177,7 @@

Resources for Info and Relationships

-
-

Techniques for Info and Relationships

- - -
-

Sufficient Techniques for Info and Relationships

- - -
- -

Situation A: The technology provides semantic structure to make information and relationships - conveyed through presentation programmatically determinable: -

- - - -
- -
- -

Situation B: The technology in use does NOT provide the semantic structure to make - the information and relationships conveyed through presentation programmatically determinable: -

- - - -
- -
- -
-

Additional Techniques (Advisory) for Info and Relationships

- - - - -
- -
-

Failures for Info and Relationships

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/interruptions.html b/understanding/20/interruptions.html index 8a6b11f8f7..6f56bc43e1 100644 --- a/understanding/20/interruptions.html +++ b/understanding/20/interruptions.html @@ -69,73 +69,7 @@

Resources for Interruptions

-
-

Techniques for Interruptions

- - -
-

Sufficient Techniques for Interruptions

- - - - -
- -
-

Additional Techniques (Advisory) for Interruptions

- - -
- -
-

Failures for Interruptions

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/keyboard-no-exception.html b/understanding/20/keyboard-no-exception.html index 87d86db636..ecd3263af0 100644 --- a/understanding/20/keyboard-no-exception.html +++ b/understanding/20/keyboard-no-exception.html @@ -72,22 +72,7 @@

Resources for Keyboard (No Exception)

-
-

Techniques for Keyboard (No Exception)

- - -
-

Sufficient Techniques for Keyboard (No Exception)

- - -

No additional techniques exist for this success criterion. Follow - techniques for Success Criterion 2.1.1. If that is not possible because there is a requirement for path-dependent input, - then it is not possible to meet this Level AAA success criterion. -

- -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/keyboard.html b/understanding/20/keyboard.html index 5e3f308225..6e86c84749 100644 --- a/understanding/20/keyboard.html +++ b/understanding/20/keyboard.html @@ -154,140 +154,7 @@

Resources for Keyboard

-
-

Techniques for Keyboard

- - -
-

Sufficient Techniques for Keyboard

- - - - -
- -
-

Additional Techniques (Advisory) for Keyboard

- - - - -
- -
-

Failures for Keyboard

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/labels-or-instructions.html b/understanding/20/labels-or-instructions.html index e4bd11cf2e..9a200b4d82 100644 --- a/understanding/20/labels-or-instructions.html +++ b/understanding/20/labels-or-instructions.html @@ -138,165 +138,7 @@

Resources for Labels or Instructions

-
-

Techniques for Labels or Instructions

- - -
-

Sufficient Techniques for Labels or Instructions

- - - - -
- -

The techniques at the end of the above list should be considered "last resort" and - only used when the other techniques cannot be applied to the page. The earlier techniques - are preferred because they increase accessibility to a wider user group. - -

- -
- -
- -
-

Additional Techniques (Advisory) for Labels or Instructions

- - - - -
- -
-

Failures for Labels or Instructions

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/language-of-page.html b/understanding/20/language-of-page.html index 7f6492455f..1fd557760d 100644 --- a/understanding/20/language-of-page.html +++ b/understanding/20/language-of-page.html @@ -88,40 +88,8 @@

Resources for Language of Page

- -
-

Techniques for Language of Page

- -
-

Sufficient Techniques for Language of Page

- - -
- -
-

Additional Techniques (Advisory) for Language of Page

- - -
- -
-

Failures for Language of Page

- -
-
+ + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/language-of-parts.html b/understanding/20/language-of-parts.html index 19312aef8c..b99bbeffe1 100644 --- a/understanding/20/language-of-parts.html +++ b/understanding/20/language-of-parts.html @@ -155,32 +155,8 @@

Resources for Language of Parts

- -
-

Techniques for Language of Parts

- -
-

Sufficient Techniques for Language of Parts

- - -
- -
-

Additional Techniques (Advisory) for Language of Parts

- -
- -
-

Failures for Language of Parts

- -
-
+ + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/link-purpose-in-context.html b/understanding/20/link-purpose-in-context.html index b3b0b1e36a..6772aaa9c4 100644 --- a/understanding/20/link-purpose-in-context.html +++ b/understanding/20/link-purpose-in-context.html @@ -167,223 +167,7 @@

Resources for Link Purpose (In Context)

-
-

Techniques for Link Purpose (In Context)

- - -
-

Sufficient Techniques for Link Purpose (In Context)

- - - - -
- -
-

Additional Techniques (Advisory) for Link Purpose (In Context)

- - - - -
- -
-

Failures for Link Purpose (In Context)

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/link-purpose-link-only.html b/understanding/20/link-purpose-link-only.html index 502e7f9fe0..6518158db9 100644 --- a/understanding/20/link-purpose-link-only.html +++ b/understanding/20/link-purpose-link-only.html @@ -137,157 +137,7 @@

Resources for Link Purpose (Link Only)

-
-

Techniques for Link Purpose (Link Only)

- - -
-

Sufficient Techniques for Link Purpose (Link Only)

- - - - -
- -
-

Additional Techniques (Advisory) for Link Purpose (Link Only)

- - - - -
- -
-

Failures for Link Purpose (Link Only)

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/location.html b/understanding/20/location.html index 211ab892bf..3f3943bb4a 100644 --- a/understanding/20/location.html +++ b/understanding/20/location.html @@ -77,73 +77,7 @@

Resources for Location

-
-

Techniques for Location

- - -
-

Sufficient Techniques for Location

- - - - -
- -
-

Additional Techniques (Advisory) for Location

- - -
    - -
  • - - - -
    • - -
  • - - - -
    • - -
- -
- -
-

Failures for Location

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/low-or-no-background-audio.html b/understanding/20/low-or-no-background-audio.html index dca2fd83c7..50d3bf0a76 100644 --- a/understanding/20/low-or-no-background-audio.html +++ b/understanding/20/low-or-no-background-audio.html @@ -74,40 +74,7 @@

Resources for Low or No Background Audio

-
-

Techniques for Low or No Background Audio

- - -
-

Sufficient Techniques for Low or No Background Audio

- - - - -
- -
-

Additional Techniques (Advisory) for Low or No Background Audio

- -
- -
-

Failures for Low or No Background Audio

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/meaningful-sequence.html b/understanding/20/meaningful-sequence.html index 8e25f326bb..8692866d17 100644 --- a/understanding/20/meaningful-sequence.html +++ b/understanding/20/meaningful-sequence.html @@ -115,129 +115,7 @@

Resources for Meaningful Sequence

-
-

Techniques for Meaningful Sequence

- - -
-

Sufficient Techniques for Meaningful Sequence

- - - - -
- -
-

Additional Techniques (Advisory) for Meaningful Sequence

- -
- -
-

Failures for Meaningful Sequence

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/media-alternative-prerecorded.html b/understanding/20/media-alternative-prerecorded.html index 681a9d4800..1ff618287f 100644 --- a/understanding/20/media-alternative-prerecorded.html +++ b/understanding/20/media-alternative-prerecorded.html @@ -131,101 +131,7 @@

Resources for Media Alternative (Prerecorded)

-
-

Techniques for Media Alternative (Prerecorded)

- - -
-

Sufficient Techniques for Media Alternative (Prerecorded)

- - -
- -

Situation A: If the content is prerecorded synchronized media:

- - - -
- -
- -

Situation B: If the content is prerecorded video-only:

- - - -
- -
- -
-
- -
-

Failures for Media Alternative (Prerecorded)

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/multiple-ways.html b/understanding/20/multiple-ways.html index 4e91b70cb4..88617bb660 100644 --- a/understanding/20/multiple-ways.html +++ b/understanding/20/multiple-ways.html @@ -91,89 +91,7 @@

Resources for Multiple Ways

-
-

Techniques for Multiple Ways

- - -
-

Sufficient Techniques for Multiple Ways

- - - - -
- -
-

Additional Techniques (Advisory) for Multiple Ways

- - -
    - -
  • - - - -
    • - -
- -
- -
-

Failures for Multiple Ways

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/name-role-value.html b/understanding/20/name-role-value.html index d335a11a72..0566f1b989 100644 --- a/understanding/20/name-role-value.html +++ b/understanding/20/name-role-value.html @@ -81,137 +81,7 @@

Resources for Name, Role, Value

-
-

Techniques for Name, Role, Value

-
-

Sufficient Techniques for Name, Role, Value

-
-

Situation A: If using a standard user interface component in a markup language (e.g., - HTML): -

-
    -
  • - -
    • -
  • - -
    • -
  • -

    - using technology-specific techniques below: -

    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    • -
-
-
-

Situation B: If using script or code to re-purpose a standard user interface component - in a markup language: -

-
    -
  • -

    Exposing the names and roles, allowing user-settable properties to be directly set, - and providing notification of changes using one of the following techniques: -

    -
      -
    • - -
      • -
    -
    • -
-
-
-

Situation C: If using a standard user interface component in a programming technology:

-
    -
  • -

    - using technology-specific techniques below: -

    -
      -
    • - -
      • -
    • - -
      • -
    -
    • -
-
-
-

Situation D: If creating your own user interface component in a programming language:

-
    -
  • -

    - using technology-specific techniques below: -

    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    • -
-
-
-
-

Additional Techniques (Advisory) for Name, Role, Value

-
-
-

Failures for Name, Role, Value

-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
-
+ {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/no-keyboard-trap.html b/understanding/20/no-keyboard-trap.html index b87bd77447..2b55a64103 100644 --- a/understanding/20/no-keyboard-trap.html +++ b/understanding/20/no-keyboard-trap.html @@ -78,51 +78,7 @@

Resources for No Keyboard Trap

-
-

Techniques for No Keyboard Trap

- - -
-

Sufficient Techniques for No Keyboard Trap

- - - - -
- -
-

Additional Techniques (Advisory) for No Keyboard Trap

- - -
- -
-

Failures for No Keyboard Trap

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/no-timing.html b/understanding/20/no-timing.html index 2b5a19cf84..492cc862e5 100644 --- a/understanding/20/no-timing.html +++ b/understanding/20/no-timing.html @@ -82,39 +82,7 @@

Resources for No Timing

-
-

Techniques for No Timing

- - -
-

Sufficient Techniques for No Timing

- - - - -
- -
-

Additional Techniques (Advisory) for No Timing

- - -
- -
-

Failures for No Timing

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/non-text-content.html b/understanding/20/non-text-content.html index a86f8ad06f..b87132ba9a 100644 --- a/understanding/20/non-text-content.html +++ b/understanding/20/non-text-content.html @@ -356,575 +356,7 @@

Resources for Non-text Content

-
-

Techniques for Non-text Content

- - -
-

Sufficient Techniques for Non-text Content

- - -
- -

Situation A: If a short description can serve the same purpose and present the same - information as the non-text content: -

- - - -

- - Short text alternative techniques for Situation A: -

- -
    - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
- -
- -
- -

Situation B: If a short description can - not serve the same purpose and present the same information as the non-text content (e.g., - a chart or diagram): -

- - - -

- - Short text alternative techniques for Situation B: -

- -
    - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
- -

- - Long text alternative techniques for Situation B: -

- -
    - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
- -
- -
- -

Situation C: If non-text content is a control or accepts user input:

- - - -

- - Text alternative techniques for controls and input for Situation C: -

- -
    - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
- -
- -
- -

Situation D: If non-text content is time-based media (including live video-only and - live audio-only); a test or exercise that would be invalid if presented in text; or - primarily intended to create a specific sensory experience: -

- - - -

- - Short text alternative techniques for Situation D: -

- -
    - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
  • - - - -
    • - -
- -
- -
- -

Situation E: If non-text content is a CAPTCHA:

- - - -
- -
- -

Situation F: If the non-text content should be ignored by assistive technology:

- - - -

- - Techniques to indicate that text alternatives are not required for Situation F: -

- - - -
- -
- -
-

Additional Techniques (Advisory) for Non-text Content

- -
- -

CSS Techniques (Advisory)

- - - -
- -
- -
-

Failures for Non-text Content

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/on-focus.html b/understanding/20/on-focus.html index 1a717a7547..c9a7cc7530 100644 --- a/understanding/20/on-focus.html +++ b/understanding/20/on-focus.html @@ -94,74 +94,7 @@

Resources for On Focus

-
-

Techniques for On Focus

- - -
-

Sufficient Techniques for On Focus

- - - - -
- -

A change of content is not always a - change of context. This success criterion is automatically met if changes in content are not also changes - of context. -

- -
- -
- -
-

Additional Techniques (Advisory) for On Focus

- - - - -
- -
-

Failures for On Focus

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/on-input.html b/understanding/20/on-input.html index dd88a79a78..d881dbd7c6 100644 --- a/understanding/20/on-input.html +++ b/understanding/20/on-input.html @@ -133,116 +133,7 @@

Resources for On Input

-
-

Techniques for On Input

- - -
-

Sufficient Techniques for On Input

- - - - -
- -

A change of content is not always a - change of context. This success criterion is automatically met if changes in content are not also changes - of context. -

- -
- -
- -
-

Additional Techniques (Advisory) for On Input

- - - - -
- -
-

Failures for On Input

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/page-titled.html b/understanding/20/page-titled.html index 851895daf2..5b4f13f73a 100644 --- a/understanding/20/page-titled.html +++ b/understanding/20/page-titled.html @@ -136,81 +136,7 @@

Resources for Page Titled

-
-

Techniques for Page Titled

- - -
-

Sufficient Techniques for Page Titled

- - - - -
- -
-

Additional Techniques (Advisory) for Page Titled

- - - - -
- -
-

Failures for Page Titled

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/parsing.html b/understanding/20/parsing.html index 53ae9ffe44..81fcc3a094 100644 --- a/understanding/20/parsing.html +++ b/understanding/20/parsing.html @@ -110,99 +110,7 @@

Resources for Parsing

-
-

Techniques for Parsing

- - -
-

Sufficient Techniques for Parsing

- - - - -
- -
-

Additional Techniques (Advisory) for Parsing

- - -
- -
-

Failures for Parsing

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/pause-stop-hide.html b/understanding/20/pause-stop-hide.html index 20300d06ee..44c74d4d6d 100644 --- a/understanding/20/pause-stop-hide.html +++ b/understanding/20/pause-stop-hide.html @@ -177,62 +177,7 @@

Examples of Pause, Stop, Hide

Resources for Pause, Stop, Hide

-
-

Techniques for Pause, Stop, Hide

-
-

Sufficient Techniques for Pause, Stop, Hide

- -
-
-

Additional Techniques (Advisory) for Pause, Stop, Hide

-
-
-

Failures for Pause, Stop, Hide

- -
-
+ {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/predictable.html b/understanding/20/predictable.html index 36d1e7d9f9..89f066f5a5 100644 --- a/understanding/20/predictable.html +++ b/understanding/20/predictable.html @@ -34,8 +34,8 @@

Intent of Predictable

-

Additional Techniques (Advisory) for Predictable

- +

Advisory Techniques

+ {% include "understanding/intro/advisory.html" %}
    diff --git a/understanding/20/pronunciation.html b/understanding/20/pronunciation.html index e8b06ede5e..9ddb083eac 100644 --- a/understanding/20/pronunciation.html +++ b/understanding/20/pronunciation.html @@ -117,63 +117,7 @@

    Resources for Pronunciation

-
-

Techniques for Pronunciation

- - -
-

Sufficient Techniques for Pronunciation

- - - - -
- -
-

Additional Techniques (Advisory) for Pronunciation

- -
- -
-

Failures for Pronunciation

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/re-authenticating.html b/understanding/20/re-authenticating.html index b647d8bae0..14515fa28d 100644 --- a/understanding/20/re-authenticating.html +++ b/understanding/20/re-authenticating.html @@ -101,78 +101,7 @@

Resources for Re-authenticating

-
-

Techniques for Re-authenticating

- - -
-

Sufficient Techniques for Re-authenticating

- - - - -
- -

Refer to - Techniques for Addressing Success Criterion 2.2.1 for techniques related to providing notifications about time limits. - -

- -
- -
- -
-

Additional Techniques (Advisory) for Re-authenticating

- - -
- -
-

Failures for Re-authenticating

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/reading-level.html b/understanding/20/reading-level.html index 031980140c..a42b22c079 100644 --- a/understanding/20/reading-level.html +++ b/understanding/20/reading-level.html @@ -284,83 +284,7 @@

Resources for Reading Level

-
-

Techniques for Reading Level

- - -
-

Sufficient Techniques for Reading Level

- - - - -
- -

Different sites may address this success criterion in different ways. An audio version - of the content may be helpful to some users. For some people who are deaf, a sign - language version of the page may be easier to understand than a written language version - since sign language may be their first language. - Some sites may decide to do both or other combinations. No technique will help all - users who have difficulty. So different techniques are provided as sufficient techniques - here for authors trying to make their sites more accessible. Any numbered technique - or combination above can be used by a particular site and it is considered sufficient - by the Working Group. -

- -
- -
- -
-

Additional Techniques (Advisory) for Reading Level

- -
- -
-

Failures for Reading Level

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/resize-text.html b/understanding/20/resize-text.html index a0bfb83f34..92ad16c450 100644 --- a/understanding/20/resize-text.html +++ b/understanding/20/resize-text.html @@ -160,97 +160,7 @@

Resources for Resize Text

-
-

Techniques for Resize Text

- -
-

Sufficient Techniques for Resize text

-
    -
  1. - Using a technology that has commonly-available user agents that support zoom -
    2. -
  2. -

    - Ensuring that text containers resize when the text resizes - AND using measurements that are relative to other measurements in the content by using - one or more of the following techniques: -

    - -
    3. -
  3. - Providing controls on the web page that incrementally change the size of the text - -
    4. -
  4. - Ensuring that there is no loss of content or functionality when the text resizes and - text containers do not resize - -
    5. - -
- -
-

Additional Techniques (Advisory) for Resize Text

- -
- -
-

Failures for Resize Text

- -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/section-headings.html b/understanding/20/section-headings.html index aaac0e1e3b..ca70e3655b 100644 --- a/understanding/20/section-headings.html +++ b/understanding/20/section-headings.html @@ -109,44 +109,7 @@

Resources for Section Headings

-
-

Techniques for Section Headings

- - -
-

Sufficient Techniques for Section Headings

- - - - -
- -
-

Additional Techniques (Advisory) for Section Headings

- -
- -
-

Failures for Section Headings

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/sensory-characteristics.html b/understanding/20/sensory-characteristics.html index cf72b73110..e45911bd3f 100644 --- a/understanding/20/sensory-characteristics.html +++ b/understanding/20/sensory-characteristics.html @@ -102,56 +102,7 @@

Resources for Sensory Characteristics

-
-

Techniques for Sensory Characteristics

- - -
-

Sufficient Techniques for Sensory Characteristics

- - - - -
- -
-

Additional Techniques (Advisory) for Sensory Characteristics

- -
- -
-

Failures for Sensory Characteristics

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/sign-language-prerecorded.html b/understanding/20/sign-language-prerecorded.html index e901775e88..67b5c550ee 100644 --- a/understanding/20/sign-language-prerecorded.html +++ b/understanding/20/sign-language-prerecorded.html @@ -136,71 +136,7 @@

Resources for Sign Language (Prerecorded)

-
-

Techniques for Sign Language (Prerecorded)

- - -
-

Sufficient Techniques for Sign Language (Prerecorded)

- - - - -
- -
-

Additional Techniques (Advisory) for Sign Language (Prerecorded)

- -
- -
-

Failures for Sign Language (Prerecorded)

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/three-flashes-or-below-threshold.html b/understanding/20/three-flashes-or-below-threshold.html index e7cc127649..efd73669eb 100644 --- a/understanding/20/three-flashes-or-below-threshold.html +++ b/understanding/20/three-flashes-or-below-threshold.html @@ -193,54 +193,7 @@

Resources for Three Flashes or Below Threshold

-
-

Techniques for Three Flashes or Below Threshold

- - -
-

Sufficient Techniques for Three Flashes or Below Threshold

- - - - -
- -
-

Additional Techniques (Advisory) for Three Flashes or Below Threshold

- -
- -
-

Failures for Three Flashes or Below Threshold

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/three-flashes.html b/understanding/20/three-flashes.html index bcadd66156..9dd6b018b1 100644 --- a/understanding/20/three-flashes.html +++ b/understanding/20/three-flashes.html @@ -131,40 +131,7 @@

Resources for Three Flashes

-
-

Techniques for Three Flashes

- - -
-

Sufficient Techniques for Three Flashes

- - - - -
- -
-

Additional Techniques (Advisory) for Three Flashes

- -
- -
-

Failures for Three Flashes

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/timing-adjustable.html b/understanding/20/timing-adjustable.html index f31ff70f0b..f44c68bfae 100644 --- a/understanding/20/timing-adjustable.html +++ b/understanding/20/timing-adjustable.html @@ -208,154 +208,7 @@

Resources for Timing Adjustable

-
-

Techniques for Timing Adjustable

- - -
-

Sufficient Techniques for Timing Adjustable

- - -
- -

Situation A: If there are session time limits:

- - - -
- -
- -

Situation B: If a time limit is controlled by a script on the page:

- - - -
- -
- -

Situation C: If there are time limits on reading:

- - - -
- -
- -
-

Additional Techniques (Advisory) for Timing Adjustable

- -
- -
-

Failures for Timing Adjustable

- - - - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/unusual-words.html b/understanding/20/unusual-words.html index bd58abc274..ed9be79e77 100644 --- a/understanding/20/unusual-words.html +++ b/understanding/20/unusual-words.html @@ -118,208 +118,7 @@

Resources for Unusual Words

-
-

Techniques for Unusual Words

- - -
-

Sufficient Techniques for Unusual Words

- - -
- -

Situation A: If the word or phrase has a unique meaning within the web page:

- - - -
- -
- -

Situation B: If the word or phrase means different things within the same web page:

- - - -
- -
- -
-

Additional Techniques (Advisory) for Unusual Words

- - -
- -
-

Failures for Unusual Words

- - -
- -
- + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/use-of-color.html b/understanding/20/use-of-color.html index 5eddf1ed5a..00267c9bc8 100644 --- a/understanding/20/use-of-color.html +++ b/understanding/20/use-of-color.html @@ -170,77 +170,8 @@

Resources for Use of Color

- -
-

Techniques for Use of Color

-
-

Sufficient Techniques for Use of Color

-
-

Situation A: If the color of particular words, backgrounds, or other content is used - to indicate information: -

- -
- -
-

Situation B: If color is used within an image to convey information:

- -
-
- -
-

Additional Techniques (Advisory) for Use of Color

- -
- -
-

Failures for Use of Color

- -
-
+ + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/20/visual-presentation.html b/understanding/20/visual-presentation.html index ca0cd719f0..f10f458018 100644 --- a/understanding/20/visual-presentation.html +++ b/understanding/20/visual-presentation.html @@ -237,143 +237,8 @@

Resources for Visual Presentation

-
-

Techniques for Visual Presentation

-
-

Sufficient Techniques for Visual Presentation

-

- Instructions: Since this is a multi-part success criterion, you must satisfy one of the numbered - items for each of the requirements below. -

- -
-

First Requirement: Techniques to ensure foreground and background colors can be selected by the user

- -
-
-

Second Requirement: Techniques to ensure width is no more than 80 characters or glyphs (40 if CJK)

- -
-
-

Third Requirement: Techniques to ensure text is not justified (aligned to both the left and the right margins)

- -
-
-

- Fourth Requirement: Techniques to ensure line spacing (leading) is at least space-and-a-half within paragraphs, - and paragraph spacing is at least 1.5 times larger than the line spacing -

- -
-
-

- Fifth Requirement: Techniques to ensure text can be resized without assistive technology up to 200 percent in a way that - does not require the user to scroll horizontally to read a line of text on a full-screen window -

- -
-
- -
-

Additional Techniques (Advisory) for Visual Presentation

-
- -
-

Failures for Visual Presentation

- -
- -
+ {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/animation-from-interactions.html b/understanding/21/animation-from-interactions.html index 2833d59307..fffd9c55be 100644 --- a/understanding/21/animation-from-interactions.html +++ b/understanding/21/animation-from-interactions.html @@ -69,15 +69,7 @@

Resources

  • Windows 10: Reduce motion
    • -
    -

    Techniques

    -
    -

    Sufficient

    -
      -
    • C39
      • -
    • Gx: Allowing users to set a preference that prevents animation.
      • -
    -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/character-key-shortcuts.html b/understanding/21/character-key-shortcuts.html index 91d6bfcfc1..734eaa8445 100644 --- a/understanding/21/character-key-shortcuts.html +++ b/understanding/21/character-key-shortcuts.html @@ -66,20 +66,7 @@

    Resources

  • Single character key shortcuts affecting speech input – example 2
    • -
    -

    Techniques

    -
    -

    Sufficient

    - -
    -
    -

    Failure

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/concurrent-input-mechanisms.html b/understanding/21/concurrent-input-mechanisms.html index 1920fad9eb..7a49e06c09 100644 --- a/understanding/21/concurrent-input-mechanisms.html +++ b/understanding/21/concurrent-input-mechanisms.html @@ -53,21 +53,7 @@

    Resources

  • W3C CSS Media Queries Level 4: Interaction Media Features
    • -
    -

    Techniques

    -
    -

    Sufficient

    -
      -
    • Only using high-level, input-agnostic event handlers, such as focus, blur, click, in Javascript (Potential future technique).
      • -
    • Registering event handlers for keyboard/keyboard-like and pointer inputs simultaneously in Javascript; see Example 1 in Pointer Events Level 2 (Potential future technique)
      • -
    -
    -
    -

    Failure

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/content-on-hover-or-focus.html b/understanding/21/content-on-hover-or-focus.html index 349d1566a4..4c7c0c2142 100644 --- a/understanding/21/content-on-hover-or-focus.html +++ b/understanding/21/content-on-hover-or-focus.html @@ -119,27 +119,7 @@

    Resources

    -
    -

    Techniques

    -
    -

    Sufficient

    - -
    - -
    -

    Failure

    -
      -
    • F95
      • -
    • Failure to make content dismissible without moving pointer hover or keyboard focus (Potential future technique)
      • -
    • Failure to meet by content on hover or focus not remaining visible until dismissed or invalid (Potential future technique)
      • -
    -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/identify-input-purpose.html b/understanding/21/identify-input-purpose.html index f38ff20b03..67ec61b667 100644 --- a/understanding/21/identify-input-purpose.html +++ b/understanding/21/identify-input-purpose.html @@ -61,21 +61,7 @@

    Related Resources

    -
    -

    Techniques and Failures for Success Criterion 1.3.5

    - -
    -

    Sufficient Techniques

    - -
    -
    -

    Failure Techniques

    - -
    -
    +{% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} +{% include "understanding/techniques.html" %} diff --git a/understanding/21/identify-purpose.html b/understanding/21/identify-purpose.html index f3d95ec91c..887dfda6da 100644 --- a/understanding/21/identify-purpose.html +++ b/understanding/21/identify-purpose.html @@ -57,24 +57,7 @@

    Resources

  • The coga.personalisation project
    • -
    -

    Techniques

    -
    -

    Sufficient

    - -
    -
    -

    Advisory

    -
      -
    • Enabling user agents to find the version of the content that best fits their needs
      • -
    • Using semantics to identify important features (e.g., coga-simplification="simplest")
      • -
    • Using aria-invalid and aria-required
      • -
    -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/label-in-name.html b/understanding/21/label-in-name.html index d09ec27209..17b69da356 100644 --- a/understanding/21/label-in-name.html +++ b/understanding/21/label-in-name.html @@ -114,31 +114,7 @@

    Related Resources

  • Accessible Name and Description Computation in HTML Accessibility API Mappings 1.0
    • -
    -

    Techniques

    -
    -

    Sufficient Techniques

    - -
    -
    -

    Advisory Techniques

    - -
    -
    -

    Failure Techniques

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/motion-actuation.html b/understanding/21/motion-actuation.html index d75924f66d..76aef3129d 100644 --- a/understanding/21/motion-actuation.html +++ b/understanding/21/motion-actuation.html @@ -56,26 +56,7 @@

    Related Resources

    -
    -

    Techniques

    -
    -

    Sufficient

    -
      -
    • G213
      • -
    • GXXX: Supporting system level features which allow the user to disable motion actuation
      • -
    -
    -
    -

    Advisory

    - -
    -
    -

    Failure

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/non-text-contrast.html b/understanding/21/non-text-contrast.html index ab57416b16..ce600cb44c 100644 --- a/understanding/21/non-text-contrast.html +++ b/understanding/21/non-text-contrast.html @@ -549,38 +549,7 @@

    Resources

  • Gordon Legge - "Contrast requirements for form controls should be equivalent to contrast requirements for text".
    • -
    -

    Techniques

    -
    -

    Sufficient

    -
    -

    Situation A: Color is used to identify user interface components or used to identify user interface component states

    - -
    -
    -

    Situation B: Color is required to understand graphical content

    - -
    - -
    -
    -

    Failures

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/orientation.html b/understanding/21/orientation.html index 2aa3b6e42b..1025daa4d3 100644 --- a/understanding/21/orientation.html +++ b/understanding/21/orientation.html @@ -77,21 +77,7 @@

    Related Resources

  • The Screen Orientation API
    • -
    -

    Techniques

    -
    -

    Sufficient

    - -
    -
    -

    Failure

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/pointer-cancellation.html b/understanding/21/pointer-cancellation.html index 4bc4bab956..4de5a99ed8 100644 --- a/understanding/21/pointer-cancellation.html +++ b/understanding/21/pointer-cancellation.html @@ -72,28 +72,7 @@

    Examples

  • A drag-and-drop interface allows users to sort vertically stacked cards by picking up one card with the pointer (down-event), move it to a new position, and insert it at the new location when the pointer is released (up-event). Releasing the pointer outside the drop target area reverts the action, i.e., it moves the card back to the old position before the interaction started.
    • -
    -

    Techniques

    -
    -

    Sufficient

    -
      -
    • G210
      • -
    • G212
      • -
    • Touch events are only triggered when touch is removed from a control (Potential future technique)
      • -
    -
    - -
    -

    Failure

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/pointer-gestures.html b/understanding/21/pointer-gestures.html index 270ab95f8e..ba0b7c6fcb 100644 --- a/understanding/21/pointer-gestures.html +++ b/understanding/21/pointer-gestures.html @@ -96,25 +96,7 @@

    Examples

    Resources

    -
    -

    Techniques

    -
    -

    Sufficient

    - -
    - -
    -

    Advisory

    -
    -
    -

    Failure

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/reflow.html b/understanding/21/reflow.html index e37c749c4f..30f858aefd 100644 --- a/understanding/21/reflow.html +++ b/understanding/21/reflow.html @@ -359,39 +359,7 @@

    Resources

  • Responsive web design basics tutorial from Google
    • -
    -

    Techniques for Success Criterion 1.4.10: Reflow

    -
    -

    Sufficient Techniques

    - -
    -
    -

    Advisory Techniques

    -
      -
    • C34
      • -
    • CSS, Fitting images to the viewport;
      • -
    • CSS, Reflowing simple data tables (Potential future technique)
      • -
    • CSS, Fitting data cells within the width of the viewport (Potential future technique)
      • -
    • Mechanism to allow mobile view at any time (Potential future technique)
      • -
    • Alternate view supporting Reflow for otherwise excepted content (Potential future technique)
      • -
    -
    -
    -

    Failures

    - -
    -
    +{% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} +{% include "understanding/techniques.html" %} diff --git a/understanding/21/status-messages.html b/understanding/21/status-messages.html index 8442eb286e..0820accb20 100644 --- a/understanding/21/status-messages.html +++ b/understanding/21/status-messages.html @@ -116,74 +116,7 @@

    Other uses of live regions or alerts

    - -
    -

    Techniques

    -
    -

    Sufficient

    -
    - -

    Situation A: If a status message advises on the success or results of an action, or the state of an application:

    - -
    - -
    - -

    Situation B: If a status message conveys a suggestion, or a warning on the existence of an error:

    - - -

    Not all examples in the preceding general techniques use status messages to convey warnings or errors to users. A role of "alert" is only necessary where a change of context does not take place.

    - -
    -
    - -

    Situation C: If a status message conveys information on the progress of a process:

    - -
    -
    -
    -

    Advisory

    - - -
    -
    -

    Failure

    -
      -
    • F103
      • -
    • Using role="alert" or aria-live="assertive" on content which is not important and time-sensitive (future link)
      • -
    -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/target-size-enhanced.html b/understanding/21/target-size-enhanced.html index 34cbf892db..f230b4b8c8 100644 --- a/understanding/21/target-size-enhanced.html +++ b/understanding/21/target-size-enhanced.html @@ -82,28 +82,7 @@

    Resources

  • One-Handed Thumb Use on Small Touchscreen Devices
    • -
    -

    Techniques

    -
    -

    Sufficient

    -
    -
      -
    • Ensuring that targets are at least 44 by 44 CSS pixels.
      • -
    -
    -
    -
    -

    Advisory

    -
      -
    • Ensuring inline links provide sufficiently large activation target.
      • -
    -
    -
    -

    Failure

    -
      -
    • Failure of Success Criterion 2.5.5 due to target being less than 44 by 44 CSS pixels.
      • -
    -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/text-spacing.html b/understanding/21/text-spacing.html index ed5471ce84..cc45a1476a 100644 --- a/understanding/21/text-spacing.html +++ b/understanding/21/text-spacing.html @@ -139,30 +139,7 @@

    Other references

    -
    -

    Techniques

    -
    -

    Sufficient

    - - -
    -
    -

    Advisory

    - -
    -
    -

    Failure

    -
      -
      • -
    -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/21/timeouts.html b/understanding/21/timeouts.html index fd9c5523b7..55101699b4 100644 --- a/understanding/21/timeouts.html +++ b/understanding/21/timeouts.html @@ -55,16 +55,7 @@

    Related Resources

  • SSA Best Practices Library: Timeouts
    • -
    -

    Techniques

    -
    -

    Sufficient

    -
      -
    • Setting a session timeout to occur following at least 20 hours of inactivity.
      • -
    • Store user data for more than 20 hours.
      • -
    • Provide a warning of the duration of user inactivity at the start of a process.
      • -
    -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/22/accessible-authentication-enhanced.html b/understanding/22/accessible-authentication-enhanced.html index b30b20514c..c1b0933224 100644 --- a/understanding/22/accessible-authentication-enhanced.html +++ b/understanding/22/accessible-authentication-enhanced.html @@ -56,45 +56,6 @@

    Examples of Accessible Authentication (Enhanced)

    -
    -

    Techniques for Accessible Authentication (Enhanced)

    - -
    -

    Sufficient Techniques

    - - -
    - -
    -

    Additional Techniques (Advisory) for Accessible Authentication (Enhanced)

    -
    - -
    -

    Failures for Accessible Authentication (Enhanced)

    - -
    - -

    Resources

    @@ -113,5 +74,7 @@

    Resources

    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/22/accessible-authentication-minimum.html b/understanding/22/accessible-authentication-minimum.html index 217cefeb6c..3d58a34a7e 100644 --- a/understanding/22/accessible-authentication-minimum.html +++ b/understanding/22/accessible-authentication-minimum.html @@ -124,44 +124,6 @@

    Examples of Accessible Authentication (Minimum)

    -
    -

    Techniques for Accessible Authentication (Minimum)

    - -
    -

    Sufficient Techniques for Accessible Authentication (Minimum)

    - -
    - -
    -

    Additional Techniques (Advisory) for Accessible Authentication (Minimum)

    -
    - -
    -

    Failures for Accessible Authentication (Minimum)

    - -
    - -

    Resources

    @@ -178,5 +140,7 @@

    Resources

    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/22/consistent-help.html b/understanding/22/consistent-help.html index 9386a08d8a..f60facc485 100644 --- a/understanding/22/consistent-help.html +++ b/understanding/22/consistent-help.html @@ -118,46 +118,16 @@

    Examples of Consistent Help

    +
    +

    Resources

    -
    -

    Techniques for Consistent Help

    - - -
    -

    Sufficient Techniques for Consistent Help

    - -
    - -
    -

    Additional Techniques (Advisory) for Consistent Help

    - -
    - -
    -

    Failures for Consistent Help

    - -
      -
    • Inconsistent Help Location -
      • -
    -
    +
    - -
    -

    Resources

    - - - -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} - - - - diff --git a/understanding/22/dragging-movements.html b/understanding/22/dragging-movements.html index 557148f9e9..ccf3c28681 100644 --- a/understanding/22/dragging-movements.html +++ b/understanding/22/dragging-movements.html @@ -92,36 +92,7 @@

    Examples of Dragging Movements with alternatives

    -
    -

    Techniques for Dragging

    - -
    -

    Sufficient Techniques for Dragging Movements

    - - - -
    - -
    -

    Additional Techniques (Advisory) for Dragging Movements

    - -
    - -
    -

    Failures for Dragging Movements

    - - -
    - -
    - + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/22/focus-appearance.html b/understanding/22/focus-appearance.html index f8ce8764f1..8045f49f17 100644 --- a/understanding/22/focus-appearance.html +++ b/understanding/22/focus-appearance.html @@ -740,44 +740,8 @@

    Related Resources

    -
    -

    Techniques

    - -
    -

    Sufficient Techniques

    - - -
    - -
    -

    Failures

    - -
    -
    + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} \ No newline at end of file diff --git a/understanding/22/focus-not-obscured-enhanced.html b/understanding/22/focus-not-obscured-enhanced.html index 33f7b1672d..0efea824ce 100644 --- a/understanding/22/focus-not-obscured-enhanced.html +++ b/understanding/22/focus-not-obscured-enhanced.html @@ -45,24 +45,7 @@

    Examples of Focus Not Obscured (Enhanced)

    Resources

    -
    -

    Techniques for Focus Not Obscured (Enhanced)

    -
    -

    Sufficient Techniques

    - -
    -
    -

    Additional Techniques (Advisory)

    -
    -
    -

    Failures

    -
      -
    • An interaction that causes content to appear over the component with keyboard focus, visually covering part of the focus indicator. This behavior might be encountered with advertising or promotional material meant to provide more information about a product as the user navigates through a catalogue.
      • -
    • A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page, a focused item is partially obscured by the footer because content in the viewport scrolls without sufficient scroll padding.
      • -
    -
    -
    +{% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} +{% include "understanding/techniques.html" %} diff --git a/understanding/22/focus-not-obscured-minimum.html b/understanding/22/focus-not-obscured-minimum.html index 48a882ad56..491f853a3d 100644 --- a/understanding/22/focus-not-obscured-minimum.html +++ b/understanding/22/focus-not-obscured-minimum.html @@ -169,35 +169,7 @@

    Resources

    -
    -

    Techniques for Focus Not Obscured (Minimum)

    - -
    -

    Sufficient Techniques

    - - - -
    - -
    -

    Additional Techniques (Advisory)

    - -
    - -
    -

    Failures

    - -
    - -
    - + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/22/redundant-entry.html b/understanding/22/redundant-entry.html index 61ad38fd94..f77af0fe13 100644 --- a/understanding/22/redundant-entry.html +++ b/understanding/22/redundant-entry.html @@ -78,42 +78,16 @@

    Examples of Redundant Entry

    -
    - -

    Techniques for Redundant Entry

    - -
    - -

    Sufficient Techniques for Redundant Entry

    - - - -
    - -
    -

    Additional Techniques (Advisory) for Redundant Entry

    - -
    - -
    -

    Failures for Redundant Entry

    +
    +

    Resources

    -
    - +
    -
    -

    Resources

    - - - -
    - + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index a0d52065e3..945478e832 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -177,32 +177,7 @@

    Resources

    -
    -

    Techniques for Target Size (Minimum)

    - - -
    -

    Sufficient Techniques for Target Size (Minimum)

    - - - -
    - -
    -

    Additional Techniques (Advisory) for Target Size (Minimum)

    - -
    - -
    -

    Failures for Target Size (Minimum)

    - -
    - -
    - + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/understanding-template.html b/understanding/understanding-template.html index 1ba3f8311a..3e0db2f888 100644 --- a/understanding/understanding-template.html +++ b/understanding/understanding-template.html @@ -34,43 +34,8 @@

    Resources

  • Resource
    • -
    -

    Techniques

    -
    -

    This section references techniques that can be used to meet the Guideline or success criterion. There are sub-sections for sufficient techniques, advisory techniques, and failures.

    -
      -
    • Within each sub-section, there may be "situations" to describe when a set of techniques need to be considered. Remove the sub-section and heading if situations are not used.
      • -
    • Techniques are provided in an unordered list. Reference techniques by linking to the filename of the technique and using the technique ID as link text. Use unlinked plain text if the technique has not been written yet.
      • -
    • If more than one technique must be used for full sufficiency, list them in the same bullet separated by "AND".
      • -
    • If a general technique requires technology-specific techniques to be implemented, end the bullet with "using" and provide a sub-list of those techniques.
      • -
    • Square brackets indicate optional components.
      • -
    -

    Remove any parts of the template that are not used, such as the section and heading for situations, sub-lists of techniques, or the "AND" construction. Also remove the square brackets around placeholder optional components.

    -
    -
    -

    Sufficient

    -

    Techniques that are sufficient to meet the guideline or success criterion.

    -
    -

    Situation

    -
      -
    • ID [AND ID]* [using] - -
      • -
    -
    -
    -
    -

    Advisory

    -

    Techniques that are not sufficient by themselves to meet the guideline or success criterion.

    -

    Same template as sufficient techniques.

    -
    -
    -

    Failure

    -

    Techniques that document conditions that would cause the page not to meet the guideline or success criterion, even if sufficient techniques are also used.

    -

    Same template as sufficient techniques.

    -
    -
    + + {% # Data for associated techniques is defined in understanding/understanding.11tydata.js %} + {% include "understanding/techniques.html" %} diff --git a/understanding/understanding.11tydata.js b/understanding/understanding.11tydata.js index e6a12fdc66..f83e545310 100644 --- a/understanding/understanding.11tydata.js +++ b/understanding/understanding.11tydata.js @@ -1,7 +1,1396 @@ +/** + * @param {any} data Data inherited from higher up 11ty's data cascade + */ export default function (data) { return { headerLabel: "Understanding Docs", headerUrl: data.understandingUrl, isUnderstanding: true, + /** @type {import("./understanding").UnderstandingAssociatedTechniquesMap} */ + associatedTechniques: { + "non-text-content": { + // 1.1.1 + sufficient: [ + { + title: + "Situation A: If a short description can serve the same purpose and present the same information as the non-text content:", + techniques: ["G94"], + groups: [ + { + id: "text-equiv-all-situation-a-shorttext", + title: "Short text alternative techniques for Situation A", + techniques: ["ARIA6", "ARIA10", "G196", "H2", "H37", "H53", "H86", "PDF1"], + }, + ], + }, + { + title: + "Situation B: If a short description can not serve the same purpose and present the same information as the non-text content (e.g., a chart or diagram):", + techniques: ["G95"], + groups: [ + { + id: "text-equiv-all-situation-b-shorttext", + title: "Short text alternative techniques for Situation B", + techniques: ["ARIA6", "ARIA10", "G196", "H2", "H37", "H53", "H86", "PDF1"], + }, + { + id: "text-equiv-all-situation-b-longtext", + title: "Long text alternative techniques for Situation B", + techniques: ["ARIA15", "G73", "G74", "G92", "H53"], + }, + ], + }, + { + title: "Situation C: If non-text content is a control or accepts user input:", + techniques: ["G82"], + groups: [ + { + id: "text-equiv-all-situation-c-controls", + title: "Text alternative techniques for controls and input for Situation C", + techniques: ["ARIA6", "ARIA9", "H24", "H30", "H36", "H44", "H65"], + }, + ], + }, + { + title: + "Situation D: If non-text content is time-based media (including live video-only and live audio-only); a test or exercise that would be invalid if presented in text; or primarily intended to create a specific sensory experience:", + techniques: ["Providing a descriptive label", "G68", "G100"], + groups: [ + { + id: "text-equiv-all-situation-d-shorttext", + title: "Short text alternative techniques for Situation D", + techniques: ["ARIA6", "ARIA10", "G196", "H2", "H37", "H53", "H86", "PDF1"], + }, + ], + }, + { + title: "Situation E: If non-text content is a CAPTCHA:", + techniques: [{ and: ["G143", "G144"] }], + }, + { + title: + "Situation F: If the non-text content should be ignored by assistive technology:", + techniques: [ + "Implementing or marking the non-text content so that it will be ignored by assistive technology", + ], + groups: [ + { + id: "text-equiv-all-situation-f-notrequired", + title: + "Techniques to indicate that text alternatives are not required for Situation F", + techniques: ["C9", "H67", "PDF4"], + }, + ], + }, + ], + advisory: ["C18"], + failure: ["F3", "F13", "F20", "F30", "F38", "F39", "F65", "F67", "F71", "F72"], + }, + + "audio-only-and-video-only-prerecorded": { + // 1.2.1 + sufficient: [ + { + title: "Situation A: If the content is prerecorded audio-only:", + techniques: ["G158"], + }, + { + title: "Situation B: If the content is prerecorded video-only:", + techniques: ["G159", "G166"], + }, + ], + advisory: ["H96"], + failure: ["F30", "F67"], + }, + + "captions-prerecorded": { + // 1.2.2 + sufficient: [ + "G93", + { + id: "G87", + using: [ + "SM11", + "SM12", + "H95", + "Using any readily available media format that has a video player that supports closed captioning", + ], + usingQuantity: "any", + }, + ], + failure: ["F8", "F75", "F74"], + }, + + "audio-description-or-media-alternative-prerecorded": { + // 1.2.3 + sufficient: [ + { id: "G69", using: ["G58"] }, + { + title: "Linking to the alternative for time-based media", + using: ["H53"], + }, + "G78", + { + id: "G173", + using: ["SM6", "SM7", "G226", "Using any player that supports audio and video"], + }, + { + id: "G8", + using: ["SM1", "SM2", "Using any player that supports audio and video"], + }, + "G203", + ], + advisory: ["H96"], + }, + + "captions-live": { + // 1.2.4 + sufficient: [ + { and: ["G9", "G93"] }, + { + and: ["G9", "G87"], + using: [ + "SM11", + "SM12", + "Using any readily available media format that has a video player that supports closed captioning", + ], + }, + ], + sufficientNote: "Captions may be generated using real-time text translation service.", + }, + + "audio-description-prerecorded": { + // 1.2.5 + sufficient: [ + "G78", + { + id: "G173", + using: ["SM6", "SM7", "G226", "Using any player that supports audio and video"], + }, + { + id: "G8", + using: ["SM1", "SM2", "Using any player that supports audio and video"], + }, + "G203", + ], + advisory: ["H96"], + failure: ["F113"], + }, + + "sign-language-prerecorded": { + // 1.2.6 + sufficient: [ + "G54", + { + id: "G81", + using: ["SM13", "SM14"], + }, + ], + }, + + "extended-audio-description-prerecorded": { + // 1.2.7 + sufficient: [ + { + id: "G8", + using: ["SM1", "SM2", "Using any player that supports audio and video"], + }, + ], + advisory: ["H96"], + }, + + "media-alternative-prerecorded": { + // 1.2.8 + sufficient: [ + { + title: "Situation A: If the content is prerecorded synchronized media:", + techniques: [ + { + id: "G69", + using: ["G58"], + }, + { + title: "Linking to the alternative for time-based media", + using: ["H53"], + }, + ], + }, + { + title: "Situation B: If the content is prerecorded video-only:", + techniques: ["G159"], + }, + ], + failure: ["F74"], + }, + + "audio-only-live": { + // 1.2.9 + sufficient: ["G151", "G150", "G157"], + }, + + "info-and-relationships": { + // 1.3.1 + sufficient: [ + { + title: + "Situation A: The technology provides semantic structure to make information and relationships conveyed through presentation programmatically determinable:", + techniques: [ + "ARIA11", + "H101", + "ARIA12", + "ARIA13", + "ARIA16", + "ARIA17", + "ARIA20", + { and: ["G115", "H49"] }, + "G117", + "G140", + "ARIA24", + { + title: + "Making information and relationships conveyed through presentation programmatically determinable", + using: [ + "G138", + "H51", + "PDF6", + "PDF20", + "H39", + "H63", + "H43", + "H44", + "H65", + "PDF10", + "PDF12", + "H71", + "H85", + "H48", + "H42", + "PDF9", + "PDF11", + "PDF17", + "PDF21", + "H97", + ], + usingQuantity: "", + }, + ], + }, + { + title: + "Situation B: The technology in use does NOT provide the semantic structure to make the information and relationships conveyed through presentation programmatically determinable:", + techniques: [ + "G117", + { + title: + "Making information and relationships conveyed through presentation programmatically determinable or available in text", + using: ["T1", "T2", "T3"], + usingQuantity: "", + }, + ], + }, + ], + advisory: ["C22", "G162", "ARIA1", "ARIA2", "G141"], + failure: ["F2", "F33", "F34", "F42", "F43", "F46", "F48", "F90", "F91", "F92", "F111"], + }, + + "meaningful-sequence": { + // 1.3.2 + sufficient: [ + { + id: "G57", + suffix: "for all the content in the web page", + }, + { + id: "G57", + prefix: + "Marking sequences in the content as meaningful using one of the following techniques AND", + suffix: "for those sequences", + using: ["H34", "H56", "C6", "C8"], + skipUsingPhrase: true, + }, + "C27", + "PDF3", + ], + failure: ["F34", "F33", "F32", "F49", "F1"], + }, + + "sensory-characteristics": { + // 1.3.3 + sufficient: ["G96"], + failure: ["F14", "F26"], + }, + + orientation: { + // 1.3.4 + sufficient: ["G214"], + failure: ["F97", "F100"], + }, + + "identify-input-purpose": { + // 1.3.5 + sufficient: ["H98"], + failure: ["F107"], + }, + + "identify-purpose": { + // 1.3.6 + sufficient: [ + "Programmatically indicating the purpose of icons, regions and user interface components", + "ARIA11", + "Using microdata to markup user interface components (future link)", + ], + advisory: [ + "Enabling user agents to find the version of the content that best fits their needs", + 'Using semantics to identify important features (e.g., coga-simplification="simplest")', + "Using aria-invalid and aria-required", + ], + }, + + "use-of-color": { + // 1.4.1 + sufficient: [ + { + title: + "Situation A: If the color of particular words, backgrounds, or other content is used to indicate information:", + techniques: ["G14", "G205", "G182", "G183"], + }, + { + title: "Situation B: If color is used within an image to convey information:", + techniques: ["G111", "G14"], + }, + ], + advisory: ["C15"], + failure: ["F13", "F73", "F81"], + }, + + "audio-control": { + // 1.4.2 + sufficient: ["G60", "G170", "G171"], + failure: ["F23", "F93"], + }, + + "contrast-minimum": { + // 1.4.3 + sufficient: [ + { + title: + "Situation A: text is less than 18 point if not bold and less than 14 point if bold", + techniques: ["G18", "G148", "G174"], + }, + { + title: + "Situation B: text is at least 18 point if not bold and at least 14 point if bold", + techniques: ["G145", "G148", "G174"], + }, + ], + advisory: ["G156"], + failure: ["F24", "F83"], + }, + + "resize-text": { + // 1.4.4 + sufficient: [ + "G142", + { + and: [ + "Ensuring that text containers resize when the text resizes", + "using measurements that are relative to other measurements in the content", + ], + using: [ + "C28", + { + title: "Techniques for relative measurements", + using: ["C12", "C13", "C14"], + skipUsingPhrase: true, + }, + { + title: "Techniques for text container resizing", + using: ["SCR34", "G146"], + skipUsingPhrase: true, + }, + ], + usingPrefix: "by", + usingQuantity: "one or more", + }, + "G178", + "G179", + ], + advisory: ["C17", "C20", "C22"], + failure: ["F69", "F80", "F94"], + }, + + "images-of-text": { + // 1.4.5 + sufficient: ["C22", "C30", "G140", "PDF7"], + advisory: ["C12", "C13", "C14", "C8", "C6"], + }, + + "contrast-enhanced": { + // 1.4.6 + sufficient: [ + { + title: + "Situation A: text is less than 18 point if not bold and less than 14 point if bold", + techniques: ["G17", "G148", "G174"], + }, + { + title: + "Situation B: text is as least 18 point if not bold and at least 14 point if bold", + techniques: ["G18", "G148", "G174"], + }, + ], + advisory: ["G156"], + failure: ["F24", "F83"], + }, + + "low-or-no-background-audio": { + // 1.4.7 + sufficient: ["G56"], + }, + + "visual-presentation": { + // 1.4.8 + sufficientIntro: ` + Instructions: Since this is a multi-part success criterion, + you must satisfy one of the numbered items for each of the requirements below. + `, + sufficient: [ + { + title: + "First Requirement: Techniques to ensure foreground and background colors can be selected by the user", + techniques: ["C23", "C25", "G156", "G148", "G175"], + }, + { + title: + "Second Requirement: Techniques to ensure width is no more than 80 characters or glyphs (40 if CJK)", + techniques: ["G204", "C20"], + }, + { + title: + "Third Requirement: Techniques to ensure text is not justified (aligned to both the left and the right margins)", + techniques: ["C19", "G172", "G169"], + }, + { + title: + "Fourth Requirement: Techniques to ensure line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing", + techniques: ["G188", "C21"], + }, + { + title: + "Fifth Requirement: Techniques to ensure text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window", + techniques: [ + "G204", + { + and: [ + "G146", + "using measurements that are relative to other measurements in the content", + ], + using: ["C12", "C13", "C14", "C24", "SCR34"], + usingPrefix: "by", + usingQuantity: "one or more", + }, + "G206", + ], + }, + ], + failure: ["F24", "F88"], + }, + + "images-of-text-no-exception": { + // 1.4.9 + sufficient: ["C22", "C30", "G140", "PDF7"], + advisory: ["C12", "C13", "C14", "C8", "C6"], + }, + + reflow: { + // 1.4.10 + sufficient: [ + "C32", + "C31", + "C33", + "C38", + "SCR34", + "G206", + "G224", + "G225", + "Using PDF/UA when creating PDFs (Potential future technique)", + ], + advisory: [ + "C34", + "C37", + "CSS, Reflowing simple data tables (Potential future technique)", + "CSS, Fitting data cells within the width of the viewport (Potential future technique)", + "Mechanism to allow mobile view at any time (Potential future technique)", + "Alternate view supporting Reflow for otherwise excepted content (Potential future technique)", + ], + failure: ["F102"], + }, + + "non-text-contrast": { + // 1.4.11 + sufficient: [ + { + title: + "Situation A: Color is used to identify user interface components or used to identify user interface component states", + techniques: ["G195", "G174"], + }, + { + title: "Situation B: Color is required to understand graphical content", + techniques: ["G207", "G209"], + }, + ], + failure: ["F78"], + }, + + "text-spacing": { + // 1.4.12 + sufficient: ["C36", "C35"], + advisory: ["C8", "C21", "C28"], + failure: ["F104"], + }, + + "content-on-hover-or-focus": { + // 1.4.13 + sufficient: [ + "SCR39", + 'ARIA: Using role="tooltip" (Potential future technique)', + "CSS: Using hover and focus pseudo classes (Potential future technique)", + ], + failure: [ + "F95", + "Failure to make content dismissible without moving pointer hover or keyboard focus (Potential future technique)", + "Failure to meet by content on hover or focus not remaining visible until dismissed or invalid (Potential future technique)", + ], + }, + + keyboard: { + // 2.1.1 + sufficient: [ + "G202", + { + title: "Ensuring keyboard control", + using: ["H91", "PDF3", "PDF11", "PDF23"], + }, + { + id: "G90", + using: ["SCR20", "SCR35", "SCR2"], + }, + ], + advisory: [ + { + and: [ + "Using WAI-ARIA role, state, and value attributes if repurposing static elements as interactive user interface components (future link)", + "SCR29", + ], + }, + ], + failure: ["F54", "F55", "F42"], + }, + + "no-keyboard-trap": { + // 2.1.2 + sufficient: ["G21"], + failure: ["F10"], + }, + + "keyboard-no-exception": { + // 2.1.3 + sufficient: [ + ` + No additional techniques exist for this success criterion. + Follow techniques for Success Criterion 2.1.1. + If that is not possible because there is a requirement for path-dependent input, + then it is not possible to meet this Level AAA success criterion. + `, + ], + }, + + "character-key-shortcuts": { + // 2.1.4 + sufficient: ["G217"], + failure: ["F99"], + }, + + "timing-adjustable": { + // 2.2.1 + sufficient: [ + { + title: "Situation A: If there are session time limits:", + techniques: ["G133", "G198"], + }, + { + title: "Situation B: If a time limit is controlled by a script on the page:", + techniques: ["G198", "G180", { and: ["SCR16", "SCR1"] }], + }, + { + title: "Situation C: If there are time limits on reading:", + techniques: ["G4", "G198", "SCR33", "SCR36"], + }, + ], + failure: ["F40", "F41", "F58"], + }, + + "pause-stop-hide": { + // 2.2.2 + sufficient: ["G4", "SCR33", "G11", "G152", "SCR22", "G186", "G191"], + failure: ["F16", "F112", "F50", "F7"], + }, + + "no-timing": { + // 2.2.3 + sufficient: ["G5"], + }, + + interruptions: { + // 2.2.4 + sufficient: ["G75", "G76", "SCR14"], + failure: ["F40", "F41"], + }, + + "re-authenticating": { + // 2.2.5 + sufficient: [ + { + title: "Providing options to continue without loss of data", + using: ["G105", "G181"], + }, + ], + sufficientNote: ` + Refer to Techniques for Addressing Success Criterion 2.2.1 + for techniques related to providing notifications about time limits. + `, + failure: ["F12"], + }, + + timeouts: { + // 2.2.6 + sufficient: [ + "Setting a session timeout to occur following at least 20 hours of inactivity", + "Storing user data for more than 20 hours", + "Providing a warning of the duration of user inactivity at the start of a process", + ], + }, + + "three-flashes-or-below-threshold": { + // 2.3.1 + sufficient: ["G19", "G176", "G15"], + }, + + "three-flashes": { + // 2.3.2 + sufficient: ["G19"], + }, + + "animation-from-interactions": { + // 2.3.3 + sufficient: ["C39", "Gx: Allowing users to set a preference that prevents animation"], + }, + + "bypass-blocks": { + // 2.4.1 + sufficient: [ + { + title: "Creating links to skip blocks of repeated material", + using: ["G1", "G123", "G124"], + }, + { + title: "Grouping blocks of repeated material in a way that can be skipped", + using: ["ARIA11", "H69", "PDF9", "H64", "SCR28"], + }, + ], + advisory: ["C6", "H97"], + }, + + "page-titled": { + // 2.4.2 + sufficient: [ + { + and: ["G88", "associating a title with a web page"], + using: ["H25", "PDF18"], + }, + ], + advisory: ["G127"], + failure: ["F25"], + }, + + "focus-order": { + // 2.4.3 + sufficient: [ + "G59", + { + title: + "Giving focus to elements in an order that follows sequences and relationships within the content", + using: ["C27", "PDF3"], + }, + { + title: "Changing a web page dynamically", + using: ["SCR26", "H102", "SCR27"], + }, + ], + failure: ["F44", "F85"], + }, + + "link-purpose-in-context": { + // 2.4.4 + sufficient: [ + "G91", + "H30", + "H24", + { + title: "Allowing the user to choose short or long link text", + using: ["G189", "SCR30"], + }, + "G53", + { + title: "Providing a supplemental description of the purpose of a link", + using: ["H33", "C7"], + }, + { + title: + "Identifying the purpose of a link using link text combined with programmatically determined link context", + using: ["ARIA7", "ARIA8", "H77", "H78", "H79", "H81"], + }, + { and: ["G91", "semantically indicating links"], using: ["PDF11", "PDF13"] }, + ], + advisory: ["H2", "H80"], + failure: ["F63", "F89"], + }, + + "multiple-ways": { + // 2.4.5 + sufficient: [ + { + using: ["G125", "G64", "G63", "G161", "G126", "G185"], + usingConjunction: "Using", + usingQuantity: "two or more", + }, + ], + advisory: ["PDF2"], + }, + + "headings-and-labels": { + // 2.4.6 + sufficient: ["G130", "G131"], + sufficientNote: ` + Headings and labels must be programmatically determined, + per Success Criterion 1.3.1. + `, + }, + + "focus-visible": { + // 2.4.7 + sufficient: ["G149", "C15", "G165", "G195", "C40", "C45", "SCR31"], + failure: ["F55", "F78"], + }, + + location: { + // 2.4.8 + sufficient: ["G65", "G63", "G128", "G127"], + advisory: ["PDF14", "PDF17"], + }, + + "link-purpose-link-only": { + // 2.4.9 + sufficient: [ + "ARIA8", + "G91", + "H30", + "H24", + { + title: "Allowing the user to choose short or long link text", + using: ["G189", "SCR30"], + }, + { + title: "Providing a supplemental description of the purpose of a link", + using: ["C7"], + }, + { + title: "Semantically indicating links", + using: ["PDF11", "PDF13"], + }, + ], + advisory: ["H2", "H33"], + failure: ["F84", "F89"], + }, + + "section-headings": { + // 2.4.10 + sufficient: ["G141", "H69"], + }, + + "focus-not-obscured-minimum": { + // 2.4.11 + sufficient: ["C43"], + failure: ["F110"], + }, + + "focus-not-obscured-enhanced": { + // 2.4.12 + sufficient: ["C43"], + failure: [ + "An interaction that causes content to appear over the component with keyboard focus, visually covering part of the focus indicator. This behavior might be encountered with advertising or promotional material meant to provide more information about a product as the user navigates through a catalogue.", + 'A page has a sticky footer (attached to the bottom of the viewport). When tabbing down the page, a focused item is partially obscured by the footer because content in the viewport scrolls without sufficient scroll padding.', + ], + }, + + "focus-appearance": { + // 2.4.13 + sufficient: ["G195", "C40", "C41"], + failure: ["F55", "F78"], + }, + + "pointer-gestures": { + // 2.5.1 + sufficient: ["G215", "G216"], + failure: ["F105"], + }, + + "pointer-cancellation": { + // 2.5.2 + sufficient: [ + "G210", + "G212", + "Touch events are only triggered when touch is removed from a control (Potential future technique)", + ], + failure: ["F101"], + }, + + "label-in-name": { + // 2.5.3 + sufficient: ["G208", "G211"], + advisory: [ + "G162", + "If an icon has no accompanying text, consider using its hover text as its accessible name (Potential future technique)", + ], + failure: [ + "F96", + "F111", + "Accessible name contains the visible label text, but the words of the visible label are not in the same order as they are in the visible label text (Potential future technique)", + "Accessible name contains the visible label text, but one or more other words are interspersed in the label (Potential future technique)", + ], + }, + + "motion-actuation": { + // 2.5.4 + sufficient: [ + "G213", + "GXXX: Supporting system level features which allow the user to disable motion actuation", + ], + failure: [ + "F106", + "FXXX: Failure of Success Criterion 2.5.4 due to disrupting or disabling system level features which allow the user to disable motion actuation", + ], + }, + + "target-size-enhanced": { + // 2.5.5 + sufficient: ["Ensuring that targets are at least 44 by 44 CSS pixels"], + advisory: ["Ensuring inline links provide sufficiently large activation target"], + failure: [ + "Failure of Success Criterion 2.5.5 due to target being less than 44 by 44 CSS pixels", + ], + }, + + "concurrent-input-mechanisms": { + // 2.5.6 + sufficient: [ + "Only using high-level, input-agnostic event handlers, such as focus, blur, click, in Javascript (Potential future technique)", + 'Registering event handlers for keyboard/keyboard-like and pointer inputs simultaneously in Javascript; see Example 1 in Pointer Events Level 2 (Potential future technique)', + ], + failure: ["F98"], + }, + + "dragging-movements": { + // 2.5.7 + sufficient: ["G219"], + failure: ["F108"], + }, + + "target-size-minimum": { + // 2.5.8 + sufficient: ["C42"], + }, + + "language-of-page": { + // 3.1.1 + sufficient: ["H57", "PDF16", "PDF19"], + advisory: ["SVR5"], + }, + + "language-of-parts": { + // 3.1.2 + sufficient: ["H58", "PDF19"], + }, + + "unusual-words": { + // 3.1.3 + sufficient: [ + { + title: "Situation A: If the word or phrase has a unique meaning within the web page:", + techniques: [ + { + id: "G101", + using: [ + { id: "G55", using: ["H40"], skipUsingPhrase: true }, + { id: "G112", using: ["H54"], skipUsingPhrase: true }, + ], + usingPrefix: "for the first occurrence of the word or phrase in a web page", + }, + { + id: "G101", + using: [{ id: "G55", using: ["H40"], skipUsingPhrase: true }, "G62", "G70"], + usingPrefix: "for each occurrence of the word or phrase in a web page", + }, + ], + }, + { + title: + "Situation B: If the word or phrase means different things within the same web page:", + techniques: [ + { + id: "G101", + using: [ + { id: "G55", using: ["H40"], skipUsingPhrase: true }, + { id: "G112", using: ["H54"], skipUsingPhrase: true }, + ], + usingPrefix: "for each occurrence of the word or phrase in a web page", + }, + ], + }, + ], + }, + + abbreviations: { + // 3.1.4 + sufficient: [ + { + title: "Situation A: If the abbreviation has only one meaning within the web page:", + techniques: [ + { + id: "G102", + using: ["G97", "G55", "PDF8"], + usingPrefix: "for the first occurrence of the abbreviation in a web page", + }, + { + id: "G102", + using: ["G55", "G62", "G70", "PDF8"], + usingPrefix: "for all occurrences of the abbreviation in a web page", + }, + ], + }, + { + title: + "Situation B: If the abbreviation means different things within the same web page:", + techniques: [ + { + id: "G102", + using: ["G55", "PDF8"], + usingPrefix: "for all occurrences of abbreviations in a web page", + }, + ], + }, + ], + advisory: ["H28"], + }, + + "reading-level": { + // 3.1.5 + sufficient: ["G86", "G103", "G79", "G153", "G160"], + sufficientNote: ` + Different sites may address this success criterion in different ways. + An audio version of the content may be helpful to some users. + For some people who are deaf, a sign language version of the page may be + easier to understand than a written language version since sign language may be their first language. + Some sites may decide to do both or other combinations. + No technique will help all users who have difficulty. + So different techniques are provided as sufficient techniques here for authors trying to make their sites more accessible. + Any numbered technique or combination above can be used by a particular site and it is considered sufficient by the Working Group. + `, + }, + + pronunciation: { + // 3.1.6 + sufficient: [ + "G120", + "G121", + { + id: "G62", + suffix: + "that includes pronunciation information for words that have a unique pronunciation in the content and have meaning that depends on pronunciation", + }, + "G163", + "H62", + ], + }, + + "on-focus": { + // 3.2.1 + sufficient: ["G107"], + sufficientNote: ` + A change of content is not always a change of context. + This success criterion is automatically met if changes in content are not also changes of context. + `, + advisory: ["G200", "G201"], + failure: ["F55"], + }, + + "on-input": { + // 3.2.2 + sufficient: [ + { + id: "G80", + using: ["H32", "H84", "PDF15"], + }, + "G13", + "SCR19", + ], + sufficientNote: ` + A change of content is not always a change of context. + This success criterion is automatically met if changes in content are not also changes of context. + `, + advisory: ["G201"], + failure: ["F36", "F37"], + }, + + "consistent-navigation": { + // 3.2.3 + sufficient: ["G61"], + advisory: ["PDF14", "PDF17"], + failure: ["F66"], + }, + + "consistent-identification": { + // 3.2.4 + sufficient: [ + { + and: [ + "G197", + 'following the sufficient techniques for Success Criterion 1.1.1 and sufficient techniques for Success Criterion 4.1.2 for providing labels, names, and text alternatives', + ], + }, + ], + sufficientNote: ` +

    + Text alternatives that are "consistent" are not always "identical." + For instance, you may have a graphical arrow at the bottom of a web page that + links to the next web page. The text alternative may say "Go to page 4." + Naturally, it would not be appropriate to repeat this exact text alternative on the next web page. + It would be more appropriate to say "Go to page 5". Although these text alternatives + would not be identical, they would be consistent, and therefore would satisfy this success criterion. +

    + A single non-text-content-item may be used to serve different functions. + In such cases, different text alternatives are necessary and should be used. + Examples can be commonly found with the use of icons such as check marks, cross marks, and traffic signs. + Their functions can be different depending on the context of the web page. + A check mark icon may function as "approved", "completed", or "included", to name a few, depending on the situation. + Using "check mark" as text alternative across all web pages does not help users understand the function of the icon. + Different text alternatives can be used when the same non-text content serves multiple functions. +

    + `, + failure: ["F31"], + }, + + "change-on-request": { + // 3.2.5 + sufficient: [ + { + title: "Situation A: If the web page allows automatic updates:", + techniques: ["G76"], + }, + { + title: "Situation B: If automatic redirects are possible:", + techniques: [ + "SVR1", + { + id: "G110", + using: ["H76"], + }, + ], + }, + { + title: "Situation C: If the web page uses pop-up windows:", + techniques: [ + { + title: "Including pop-up windows", + using: ["H83", "SCR24"], + }, + ], + }, + { + title: "Situation D: If using an onchange event on a select element:", + techniques: ["SCR19"], + }, + ], + advisory: ["G200"], + failure: ["F60", "F61", "F9", "F22", "F52", "F40", "F41"], + }, + + "consistent-help": { + // 3.2.6 + sufficient: ["G220"], + failure: ["Inconsistent Help Location"], + }, + + "error-identification": { + // 3.3.1 + sufficient: [ + { + title: + "Situation A: If a form contains fields for which information from the user is mandatory.", + techniques: ["G83", "ARIA2", "ARIA21", "SCR18", "PDF5"], + }, + { + title: + "Situation B: If information provided by the user is required to be in a specific data format or of certain values.", + techniques: ["ARIA18", "ARIA19", "ARIA21", "G84", "G85", "SCR18", "SCR32", "PDF22"], + }, + ], + advisory: ["G139", "G199"], + }, + + "labels-or-instructions": { + // 3.3.2 + sufficient: [ + { + id: "G131", + using: ["ARIA1", "ARIA9", "ARIA17", "G89", "G184", "G162", "G83", "H90", "PDF5"], + usingConjunction: "AND", + }, + "H44", + "PDF10", + "H71", + "G167", + ], + sufficientNote: ` + The techniques at the end of the above list should be considered "last resort" and + only used when the other techniques cannot be applied to the page. + The earlier techniques are preferred because they increase accessibility to a wider user group. + `, + advisory: ["G13"], + failure: ["F82"], + }, + + "error-suggestion": { + // 3.3.3 + sufficient: [ + { + title: + "Situation A: If information for a field is required to be in a specific data format:", + techniques: ["ARIA18", "G85", "G177", "PDF22"], + }, + { + title: + "Situation B: Information provided by the user is required to be one of a limited set of values:", + techniques: ["ARIA18", "G84", "G177", "PDF22"], + }, + ], + sufficientNote: + "In some cases, more than one of these situations may apply. For example, when a mandatory field also requires the data to be in a specific format.", + advisory: ["G139", "G199", "SCR18", "SCR32"], + }, + + "error-prevention-legal-financial-data": { + // 3.3.4 + sufficient: [ + { + title: + "Situation A: If an application causes a legal transaction to occur, such as making a purchase or submitting an income tax return:", + techniques: ["G164", "G98", "G155"], + }, + { + title: "Situation B: If an action causes information to be deleted:", + techniques: ["G99", "G168", "G155"], + }, + { + title: "Situation C: If the web page includes a testing application", + techniques: ["G98", "G168"], + }, + ], + advisory: ["SCR18", "G199"], + }, + + help: { + // 3.3.5 + sufficient: [ + { + title: "Situation A: If a form requires text input:", + techniques: ["G71", "G193", "G194", "G184"], + }, + { + title: "Situation B: If a form requires text input in an expected data format:", + techniques: ["G89", "G184"], + }, + ], + advisory: ["H89"], + }, + + "error-prevention-all": { + // 3.3.6 + sufficient: [ + 'Following the sufficient techniques for Success Criterion 3.3.4 for all forms that require the user to submit information', + ], + }, + + "redundant-entry": { + // 3.3.7 + sufficient: [ + "G221", + "Not requesting the same information twice (Potential future technique)", + ], + }, + + "accessible-authentication-minimum": { + // 3.3.8 + sufficient: [ + "G218", + "H100", + "Providing WebAuthn as an alternative to username/password (Potential future technique)", + "Providing a third-party login using OAuth (Potential future technique)", + "Using two techniques to provide two-factor authentication (Potential future technique)", + ], + failure: ["F109"], + }, + + "accessible-authentication-enhanced": { + // 3.3.9 + sufficient: [ + "G218", + "H100", + "Providing WebAuthn as an alternative to username/password (Potential future technique)", + "Providing a third-party login using OAuth (Potential future technique)", + "Using two techniques to provide two-factor authentication (Potential future technique)", + ], + failure: ["F109"], + }, + + parsing: { + // 4.1.1 (techniques not listed in 2.2) + sufficient: [ + "G134", + "G192", + "H88", + { + title: "Ensuring that web pages can be parsed", + using: [{ and: ["H74", "H93", "H94"] }, "H75"], + }, + ], + failure: ["F70", "F77"], + }, + // TODO: check where else parsing-related techniques are referenced (I've been looking at 2.2 docs to populate this) + + "name-role-value": { + // 4.1.2 + sufficient: [ + { + title: + "Situation A: If using a standard user interface component in a markup language (e.g., HTML):", + techniques: [ + "ARIA14", + "ARIA16", + { + id: "G108", + using: ["H91", "H44", "H64", "H65", "H88"], + usingQuantity: "one or more", + }, + ], + }, + { + title: + "Situation B: If using script or code to re-purpose a standard user interface component in a markup language:", + techniques: [ + { + title: + "Exposing the names and roles, allowing user-settable properties to be directly set, and providing notification of changes", + using: ["ARIA16"], + }, + ], + }, + { + title: + "Situation C: If using a standard user interface component in a programming technology:", + techniques: [ + { + id: "G135", + using: ["PDF10", "PDF12"], + usingQuantity: "one or more", + }, + ], + }, + { + title: + "Situation D: If creating your own user interface component in a programming language:", + techniques: [ + { + id: "G10", + using: ["ARIA4", "ARIA5", "ARIA16"], + usingQuantity: "one or more", + }, + ], + }, + ], + failure: ["F59", "F15", "F20", "F42", "F68", "F79", "F86", "F89", "F111"], + }, + + "status-messages": { + // 4.1.3 + sufficient: [ + { + title: + "Situation A: If a status message advises on the success or results of an action, or the state of an application:", + techniques: [ + { + id: "ARIA22", + using: ["G199"], + usingQuantity: "any", + usingConjunction: "in combination with", + }, + ], + }, + { + title: + "Situation B: If a status message conveys a suggestion, or a warning on the existence of an error:", + techniques: [ + { + id: "ARIA19", + using: ["G83", "G84", "G85", "G177", "G194"], + usingQuantity: "any", + usingConjunction: "in combination with", + }, + ], + note: 'Not all examples in the preceding general techniques use status messages to convey warnings or errors to users. A role of "alert" is only necessary where a change of context does not take place.', + }, + { + title: + "Situation C: If a status message conveys information on the progress of a process:", + techniques: [ + "ARIA23", + 'Using role="progressbar" (future link)', + { + and: ["ARIA22", "G193"], + andConjunction: "in combination with", + }, + ], + }, + ], + advisory: [ + "Using aria-live regions with chat clients (future link)", + 'Using aria-live regions to support 1.4.13 Content on Hover or Focus (future link)', + 'Using role="marquee" (future link)', + 'Using role="timer" (future link)', + { + id: "ARIA18", + prefix: "Where appropriate, moving focus to new content with", + }, + { + id: "SCR14", + prefix: "Supporting personalization with", + }, + ], + failure: [ + "F103", + 'Using role="alert" or aria-live="assertive" on content which is not important and time-sensitive (future link)', + ], + }, + }, }; } diff --git a/understanding/understanding.d.ts b/understanding/understanding.d.ts new file mode 100644 index 0000000000..b0e57904c2 --- /dev/null +++ b/understanding/understanding.d.ts @@ -0,0 +1,91 @@ +export interface UnderstandingAssociatedTechniqueEntry { + id?: string; + title?: string; + /** Combines with `id` to specify text before the linked technique title */ + prefix?: string; + /** Combines with `id` to specify text after the linked technique title */ + suffix?: string; +} + +interface UnderstandingAssociatedTechniqueUsingMixin { + skipUsingPhrase?: boolean; + using: UnderstandingAssociatedTechniqueArray; + usingConjunction?: string; + usingPrefix?: string; + usingQuantity?: string; +} + +interface UnderstandingAssociatedTechniqueEntryWithUsing + extends UnderstandingAssociatedTechniqueEntry, + UnderstandingAssociatedTechniqueUsingMixin {} + +interface UnderstandingAssociatedTechniqueConjunction { + and: Array; + andConjunction?: string; +} + +interface UnderstandingAssociatedTechniqueConjunctionWithUsing + extends UnderstandingAssociatedTechniqueConjunction, + UnderstandingAssociatedTechniqueUsingMixin {} + +/** Represents either type of associated technique entry that contains `using` */ +export type UnderstandingAssociatedTechniqueParent = + | UnderstandingAssociatedTechniqueEntryWithUsing + | UnderstandingAssociatedTechniqueConjunctionWithUsing; + +type UnderstandingAssociatedTechniqueArrayElement = + | string + | UnderstandingAssociatedTechniqueEntry + | UnderstandingAssociatedTechniqueConjunction + | UnderstandingAssociatedTechniqueParent; + +/** Array of shorthand strings or objects defining associated techniques */ +export type UnderstandingAssociatedTechniqueArray = UnderstandingAssociatedTechniqueArrayElement[]; + +/** An associated technique that has already been run through expandTechniqueToObject */ +export type ResolvedUnderstandingAssociatedTechnique = Exclude< + UnderstandingAssociatedTechniqueArray[number], + string +>; + +interface UnderstandingAssociatedTechniqueSectionBase { + title: string; + note?: string; +} +interface UnderstandingAssociatedTechniqueSectionWithoutGroups + extends UnderstandingAssociatedTechniqueSectionBase { + techniques: UnderstandingAssociatedTechniqueArray; + groups?: never; // Needed to form discriminated union between with/without +} +export interface UnderstandingAssociatedTechniqueGroup { + id: string; + title: string; + techniques: UnderstandingAssociatedTechniqueArray; +} +interface UnderstandingAssociatedTechniqueSectionWithGroups + extends UnderstandingAssociatedTechniqueSectionBase { + groups: UnderstandingAssociatedTechniqueGroup[]; + // Restrict techniques to types without `using` when paired with `groups` + techniques: Array< + string | UnderstandingAssociatedTechniqueEntry | UnderstandingAssociatedTechniqueConjunction + >; +} + +/** A top-level section (most commonly used to define multiple situations) */ +export type UnderstandingAssociatedTechniqueSection = + | UnderstandingAssociatedTechniqueSectionWithoutGroups + | UnderstandingAssociatedTechniqueSectionWithGroups; + +/** Object defining various types of techniques for a success criterion */ +interface UnderstandingAssociatedTechniques { + advisory?: UnderstandingAssociatedTechniqueArray; + failure?: UnderstandingAssociatedTechniqueArray; + sufficient?: UnderstandingAssociatedTechniqueSection[] | UnderstandingAssociatedTechniqueArray; + sufficientIntro?: string; + sufficientNote?: string; +} + +export type UnderstandingAssociatedTechniquesMap = Record< + string, + UnderstandingAssociatedTechniques +>;